Chromeの検査ツールがブラウザウィンドウを反映していない

Question

html/cssを使用して基本的なナビゲーションヘッダーを作成するときに間違っていたことを私の頭が掻き立てています。

Firefoxの開発ツールは、私のデザインが正しいことを示していますが、chrome dev tools/jsfiddleはそうではありません。

クローム：

お知らせ紫色のライン。 （ページ全体を拡大）

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

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

Answer 1

：彼らは適切に、 "連絡先" のカットオフ

下記のHTML/CSSコードの基本的な主旨であってはならないクロムに整列されていません

body要素の余白があります。

試してみてください。

body { 
    margin: 0; 
} 

デモ：https://jsfiddle.net/80q8esjf/

Answer 2

あなたは異なるレイアウトスタイルの多くを混合すること、および身体上のリセットが欠落しているようです。

私は1つを選ぶことをお勧めします。 flexboxそのような：

HTMLあなただけのCSSのベストプラクティスをルックアップするために私を思い出し

<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; 
}