Chrome检查工具未反映浏览器窗口，对齐Div

Question

在使用html / css制作基本导航标题时，我一直想知道我做错了什么。

Firefox开发工具显示我的设计是正确的，但镀铬开发工具/ jsfiddle说不然。

铬：

注意紫色线条。它们没有正确对齐铬，“接触”不应该被切断

以下html / css代码的基本要点：（展开整页）

.nav-background {
    background-color: green;
    width: 100%;
    height: 80px;
    position: fixed;
    top:0;
    padding: 0px;
}

.nav-img {
    display: inline-block;
    width: 60px;
    height: 100%;
}

.nav-img img {
    height: 48px;
    padding-top: 16px;
}

.nav-links {
    float: right;
    padding: 0px;
    display: flex;
    justify-content: flex-end;
    width:900px;
    height: 100%;
}

.nav-links a {
    padding-top: 20px;
    color: white;
    font-size: 2rem;
    margin-left: 1em;
}

.container {
    margin: 0 auto;
    width: 960px;
    height: 100%;
}


.about-me {
    margin: 0 auto;
    width: 960px;
    height: 200px;
    background-color: #aaa;
}

<div class="nav-background">
	<div class="container">
		<div class="nav-img"><img src="http://via.placeholder.com/150x150"></div><!--nav-img-->
		<div class="nav-links">
			<a href="#about">About</a> <a href="#portfolio">Portfolio</a> <a href="#links">Contact</a>
		</div><!--nav-links-->
	</div><!--container-->
</div><!--nav-background-->

<div class="about-me">
</div><!--about-me-->

Answer 1

body元素上的边距正在抛弃。

尝试：

body {
    margin: 0;
}

演示：https://jsfiddle.net/80q8esjf/

Answer 2

您似乎混合了许多不同的布局样式，并且在身体上缺少重置。

我建议选择一个即。 flexbox喜欢这样：

HTML

<div class="container">
   <div class="nav-img"><img src="https://via.placeholder.com/150x150"></div>
    <div class="nav-links">
        <a href="#about">About</a> <a href="#portfolio">Portfolio</a> <a href="#links">Contact</a>
    </div>
</div>

CSS

body {
  margin: 0;
}
.container {
  display: flex;
}
.nav-links {
  flex: 1 auto;
  text-align: right;
}