网站文本显示异常求助：调整padding/margin/gridbox仍未解决

问题定位 #

1. HTML结构错误：页面顶部的foto_zwolle图片放置在<body>标签外部，会导致浏览器自动修正布局引发偏移；tekstrechts容器被错误嵌套在tekstmidden内，导致右侧文本无法进入网格的正确区域。
2. Grid布局无效：grid-template-areas定义了header、footer等区域，但实际<header>和<footer>不在grid-container内部，网格规则不生效；给网格项硬编码width:360px，会导致小屏幕下内容溢出、布局错乱。
3. Sticky Footer配置错误：.wrapper的min-height设置为0%，无法撑起内容区高度；.sticky缺少position:sticky属性，footer无法固定在页面底部。
4. CSS代码冗余：导航链接样式完全重复，可合并为单一类简化代码。

修复后的代码 #

HTML代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylejustin.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@1,100&display=swap" rel="stylesheet">
  <title> Nieuws uit Zwolle </title>
</head>
<body>
  <img class="foto_zwolle" src="logo_rechtop_klein.png" alt="Zwolle Logo">
  
  <header>
    <div class="knopanimatie">
      <a class="nav-link" href="home.html"> Home </a>
      <a class="nav-link" href="concerten.html"> Concerten </a>
      <a class="nav-link" href="sport.html"> Sport </a>
      <a class="nav-link" href="Recepten.html"> Recepten </a>
      <a class="nav-link" href="contact.html"> Contact </a>
    </div>
  </header>
  
  <div class="grid-container">
    <div class="zwolle">
      <h1> Nieuws uit Zwolle </h1>
    </div>
    <div class="tekstlinks">
      <p> sapien et ligula ullamcorper. In aliquam sem fringilla ut morbius.</p>
    </div>
    <div class="tekstmidden">
      <img src="/mainPags/Zwolle+op+hoogte.jpg" alt="Zwolle uitzicht" style="max-width:100%; height:auto; z-index: 20;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="tekstrechts">
      <p>In aliquam sem fringilla ut morbius.</p>
    </div>
  </div>
  
  <footer class="footer">
    <h3> Footer </h3>
    <p>Footerinfo</p>
    <p> infovanfooter </p>
  </footer>
</body>
</html>

CSS代码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: 'Prompt', sans-serif;
}

header {
  background-color: navy;
  padding: 34px;
}

.nav-link {
  margin: 0 10px;
  text-decoration: none;
  color: white;
  float: left;
}

.foto_zwolle {
  width: 150px;
  float: right;
  margin: 10px;
}

.knopanimatie a::after {
  content: '';
  width: 0%;
  height: 2px;
  background: #fff;
  margin: auto;
  transition: 0.5s;
  display: block;
}

.knopanimatie a:hover::after {
  width: 100%;
}

.footer {
  color: white;
  background-color: rgb(21, 108, 179);
  text-align: center;
  padding: 10px;
  position: sticky;
  bottom: 0;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'zwolle zwolle zwolle'
    'tekstlinks tekstmidden tekstrechts';
  gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tekstlinks {
  grid-area: tekstlinks;
  padding: 30px 30px 0;
}

.tekstmidden {
  grid-area: tekstmidden;
  padding: 30px 30px 0;
}

.zwolle {
  grid-area: zwolle;
  padding: 30px;
}

.tekstrechts {
  grid-area: tekstrechts;
  padding: 30px 30px 0;
}

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