私は単一ページのウェブサイトを作っています。「下」のページには、ヘッダーとして画像があります。を使用して画像を中央に配置できます
img
{
display:block
margin-left:auto
margin-right:auto
width:400px
}
ただし、もう少し低くする必要があります。margin-topをつけてみたのですが、ページ全体に余白をつけているようです（ページが長くなる？）。ただし、マイページ上の画像の位置は変わりません。何が問題なのですか？
これは HTML の一部です。
<body>
<div id="nav">
<ul>
<li><a class="scroll" href="#about">ABOUT</a></li>
<li><a class="scroll" href="#portfolio">WORK</a></li>
<li><a class="scroll" href="#contact">CONTACT</a></li>
</ul>
</div>
<!-- Landing Page-->
<div id="landing">
<img src="front.png" alt="Cover Page">
</div>
<!-- About -->
<div id="page1">
<a id="about"></a>
<img src="Who.png" alt="About Me">
<p>
That sweet tailpipe of yours did have me charmed. It put a spell on me, but all the ass magic in Mexico can’t change Kenny Powers from his core beliefs. I’m not an ass man... I’m a tit man. I like big ass boobs — now, and forever... I’m not like a black guy, Vida...
</p>
</div>
<!-- Work -->
<div id="page2">
<a id="portfolio"></a>
<div id="container">
<a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a>
</div>
</div>
<!-- Contact -->
<div id="page3">
<a id="contact"></a>
<img src="Contact.png" alt="Contact Information">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
私が話しているヘッダーは、最初の要素ではなく、下位ページのヘッダーです。そのため、ページ全体が下に移動している理由がわかりません。