html - Chrome 检查工具不反射(reflect)浏览器窗口，对齐 Div

Question

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

Firefox dev tools 显示我的设计是正确的，但是 chrome dev tools/jsfiddle 却另有说法。

Chrome :

注意紫色线条。它们在 chrome 中没有正确对齐，“联系人”不应该被截断

以下 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/