对其他页面重复使用HTML/CSS，但不完全相同

我试图重用上一页的HTML，在新页面上编写新内容，同时仍然保留公文包的主页按钮和页脚。我复制了包含主页按钮和页脚的HTML，并使用了相同的样式表。但是当打开一个没有英雄和工作部分（大部分）相同内容的新页面时，我页面上的元素看起来稍微向右移动

当我将登录页面的内容添加到新页面上时，这个问题就会消失，元素会像我所希望的那样向左刷新。但是，当我在登录页面中输入任何不包含英雄和工作部分的内容时，问题仍然存在

我尝试过不使用边距，而是使用定位，但我不知道这是否是我应该走的正确方向。我将添加代码笔来比较两者。希望差异是显而易见的，因为我真的很想处理我的投资组合的实际内容。谢谢你的建议

:

嗨


我是加州大学圣地亚哥分校（UC San Diego）的应届毕业生，在那里我获得了学士学位
人机交互。我现在正在找工作，所以感觉很好
自由



工作↓
我正在尝试使
您始终可以在下一页中重写CSS属性，使用
标记、内联样式或附加另一个CSS文件。它们看起来几乎相同，但您的第二个容器上有
最大宽度：800px
，而您的第一个容器上有
最大宽度：900px
。我认为正是这种差异使它看起来像是“转移”到了右边。Chrome和Firefox都有很好的开发人员控制台，所以你可以将鼠标悬停在项目上，看看它们占用了多少空间，它们的边距等等。我的错误是，它们应该引用相同的样式表，所以我刚刚更新了每支笔的CSS，使其最大宽度为900px。然而，右倾化的问题仍然存在。只有当我像在画笔中那样取出一些HTML或添加以前不是HTML的新元素时，我才会注意到它。你可以在下一页中使用
标记、内联样式或附加另一个CSS文件来覆盖CSS属性。它们看起来几乎相同，但是第二个容器上有
最大宽度：800px
，而第一个容器上有
最大宽度：900px
。我认为正是这种差异使它看起来像是“转移”到了右边。Chrome和Firefox都有很好的开发人员控制台，所以你可以将鼠标悬停在项目上，看看它们占用了多少空间，它们的边距等等。我的错误是，它们应该引用相同的样式表，所以我刚刚更新了每支笔的CSS，使其最大宽度为900px。然而，右倾化的问题仍然存在。只有当我像在画笔中那样取出一些HTML，或者添加以前不是HTML的新元素时，我才会注意到它。
<div class="container">
      <header>
        <h1 class="logo"><a href="index.html">Ryan M</a></h1>
      </header>

      <section class="hero">
        <p>Hi, <a href="about.html">I'm Ryan!</a></p>
        <p>
          I'm a recent graduate from UC San Diego, where I received a B.S. in
          Human-Computer Interaction. I am currently looking for work so feel
          free to <a href="#">send me an email!!</a>
        </p>
        <p class="social">
          <a href="#"
            >Resume</a
          >
          —
          <a href="#"
            >LinkedIn</a
          >
          —
          <a href="
                   #">Github</a>
        </p>
      </section>

      <section class="work">
        <h2>Work ↓</h2>
        <article>
          <h3 class="title">KOTX website design</h3>
          <h4 class="meta">Jan-Mar 2019</h4>
        </article>
      </section>
    </div>