网页窗口缩放布局错位及主体边框延伸问题求助

• 作品集网站内容需居中显示，而非占满全屏
• 窗口尺寸调整时，header与主体部分无法对齐，适配效果差
• 主体白色边框需延伸至footer顶部

CSS代码 #

body {
  background-color: black;
  color: white;
}

header {
  background-color: rgba(238, 11, 11, 0.705);
  display: inline-flex;
  width: 100%;
  position: sticky;
}

header li {
  display: inline-flex;
  margin: 0.4em;
  font-size: 1.5em;
  border: 1px solid black;
}

header ul {
  margin-left: 40.48%;
  max-width: 75%;
  border: 1px solid black;
}

header h1 {
  margin-left: 15%;
}

.max-width {
  margin-left: 15%;
  max-width: 70.4%;
  border: 1px solid white;
}

footer {
  bottom: 0;
  position: fixed;
  background-color: rgba(238, 11, 11, 0.705);
  width: 100%;
}

footer h4,
footer p {
  margin-left: 15%;
}

.flexbox {
  display: inline-flex;
}

.flexbox img {
  border-radius: 20%;
}

HTML代码 #

<header>
  <h1>Rijul</h1>
  <ul>
    <nav>
      <li><a href=homepage.html>Home</a></li>
      <li><a href=skills&achievments.html>Skills and Achievments</a></li>
      <li><a href=portfolio.html>Portfolio</a></li>
      <!-- Put Education Qualification and Experience into portfolio -->
      <li><a href=#Blog>Blog Page</a></li>
    </nav>
  </ul>
</header>

<section class="max-width">
  <section id="Home">
    <h2>About Me:</h2>
    <h2>I'm Rijul, a<br>Computer Science<br>Student</h2>
    <div class="flexbox">
      <p>I am a first year undergrad student.</p>
      <img src="images/rij.jpg">
    </div>
  </section>
</section>
<footer>
  <section id="Contact">
    <h4>Contact Details:</h4>
    <p>Phone Number: </p>
    <p>Email: </p>
  </section>
</footer>

核心思路：用统一的居中容器对齐所有内容，调整布局方式实现自适应，修复footer定位让主体边框延伸到位。

修改后的CSS代码 #

/* 全局重置，消除默认边距内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
  color: white;
  min-height: 100vh; /* 让body至少占满视口高度 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

/* 统一居中容器，所有内容都放在这个容器里 */
.container {
  max-width: 1200px; /* 可按需调整最大宽度 */
  width: 90%; /* 小屏幕占90%宽度 */
  margin: 0 auto; /* 水平居中 */
}

header {
  background-color: rgba(238, 11, 11, 0.705);
  position: sticky;
  top: 0; /* 粘顶必须设置top值 */
  width: 100%;
}

/* header内部用容器对齐 */
.header-inner {
  display: flex;
  justify-content: space-between; /* 标题和导航左右分布 */
  align-items: center; /* 垂直居中 */
  padding: 0.5em 0;
}

header li {
  display: inline-block;
  margin: 0 0.4em;
  font-size: 1.5em;
  border: 1px solid black;
}

header ul {
  list-style: none; /* 去掉默认列表样式 */
}

/* 主体内容 */
.main-content {
  flex: 1; /* 自动填充header和footer之间的剩余空间 */
  border: 1px solid white;
  border-bottom: none; /* 去掉底部边框，和footer衔接 */
  padding: 1em;
}

footer {
  background-color: rgba(238, 11, 11, 0.705);
  width: 100%;
}

/* footer内部用容器对齐 */
.footer-inner {
  padding: 0.5em 0;
}

.flexbox {
  display: flex;
  align-items: center; /* 垂直居中文字和图片 */
  gap: 2em; /* 用gap控制间距，比margin更灵活 */
  margin-top: 1em;
}

.flexbox img {
  border-radius: 20%;
}

修改后的HTML代码 #

<header>
  <div class="container header-inner">
    <h1>Rijul</h1>
    <nav>
      <ul>
        <li><a href="homepage.html">Home</a></li>
        <li><a href="skills&achievments.html">Skills and Achievments</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <!-- Put Education Qualification and Experience into portfolio -->
        <li><a href="#Blog">Blog Page</a></li>
      </ul>
    </nav>
  </div>
</header>

<main class="container main-content">
  <section id="Home">
    <h2>About Me:</h2>
    <h2>I'm Rijul, a<br>Computer Science<br>Student</h2>
    <div class="flexbox">
      <p>I am a first year undergrad student.</p>
      <img src="images/rij.jpg" alt="Rijul's photo">
    </div>
  </section>
</main>

<footer>
  <div class="container footer-inner">
    <section id="Contact">
      <h4>Contact Details:</h4>
      <p>Phone Number: </p>
      <p>Email: </p>
    </section>
  </div>
</footer>

关键修改说明 #

1. 统一居中容器：新增.container类，通过margin: 0 auto实现水平居中，所有内容嵌套其中，彻底解决header与主体错位问题，窗口调整时自动适配。
2. Flex撑满页面：给body设置min-height: 100vh和垂直flex布局，让主体flex: 1自动填充剩余空间，实现边框延伸至footer顶部。
3. 修复header布局：用justify-content: space-between让标题和导航左右分布，去掉固定百分比margin，改为自适应布局；给sticky的header加上top: 0确保正常粘顶。
4. 细节优化：添加全局重置消除默认样式，用gap控制flex元素间距，完善图片alt属性，调整footer为非fixed布局避免遮挡内容。

内容的提问来源于stack exchange，提问作者Ri1jgo0l