页面各区块Div无法铺满屏幕问题求助（附HTML/CSS代码）

我刚完成一个小型项目，制作完页面footer后出现问题：每个section的div都无法延伸至屏幕末端，左右两侧存在间隙，此前并未出现该问题。我猜测这可能与页面像素设置有关。

屏幕左右两侧可见明显间隙，深色背景的header、hero区块以及灰色的above-footer区块都没有铺满屏幕宽度。

HTML代码 #

<body>
    <div class="header">
        <div class="header-left">
            <div class="logo">Header Logo</div>
        </div>
        <div class="header-right">
            <div class="links-top">
               <li><a href="#">header link one</a></li>
               <li><a href="#">header link two</a></li>
               <li><a href="#">header link three</a></li> 
            </div>
        </div>
    </div>
    <div class="hero">
    <div class="hero-left-head">
        <h1>This website is awesome</h1>
        <p>This website has some subtext that goes here under the main title. It’s a smaller font and the color is lower contrast.</p>
        <button class="hero-button">Sign Up</button>
    </div>
    <div class="sade">
        <img src="https://s3.us-east-1.amazonaws.com/vnda-cockpit/www-streetopia-me/2020/09/11/5f5bfd8c2bb85sade01.jpg" alt="sade" height="200" width="350">
    </div>
</div>
<div class="middle">
    <div class="title"><h1>Some Information?</h1></div>
    <div class="bmw-pics">
        <div class="bmw-text">
        <img src="https://aprperformance.com/wp-content/uploads/2015/01/BMW_M4_Lip_Installed_LR_7.jpg" alt="puke-green">
        <p>Puke Green</p>
    </div>
    <div class="bmw-text">
        <img src="https://cdn.bmwblog.com/wp-content/uploads/2015/03/Yas-Marina-Blue-BMW-F80-M3-Gets-Some-Essential-Updates-7.jpg" alt="yas">
        <p>Yas Marina</p>
    </div>
    <div class="bmw-text">
        <img src="https://f80.bimmerpost.com/forums/attachment.php?attachmentid=2671354&stc=1&d=1628858312" alt="Frost White">
        <p>Frost White</p>
    </div>
    <div class="bmw-text">
        <img src="https://1c2a8a2161d644d95009-22d26b38e78c173d82b3a9a01c774ffa.ssl.cf1.rackcdn.com/image/projectcars/f80m3/f80_m3_carbon_mirror_covers_7_w705.jpg" alt="Imola Red">
        <p>Imola Red</p>
    </div>
  </div>
</div>
<div class="above-footer">
    <div class="above-footer-p1">
    <p>If you do what you've always done, then you'll get what you've always had, you dumb buffons!</p>
</div> 
    <div class="above-footer-p2">
        <p>- A Wise Prophet</p>
</div>
</div>
<div class="last-space">
<div class="blue-box">
    <div class="action"><strong>Call to action! It's time!</strong></div>
    <div class="product-bit">Sign up for our product by clicking the button to your right :)</div>
    <button class="last-button">Sign Up!</button>
</div>
</div>
<div class="footer">
<p>Copyright © The Odin Project 2021</p>
</div>
</body>

CSS代码 #

.header {
    background-color: #1F2937;
    display: flex;
    justify-content: space-around;
    color: #f9faf8;
    font-size: 24px;
    padding: 10px;
}

.links-top {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 16px;
    font-size: 20px;
}

a {
    text-decoration: none;
    color: #f9faf8;
}

p {
    font-size: 15px;
}

.hero {
    display: flex;
    flex-direction: row;
    background-color: #1F2937;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}

.hero-left-head {
    font-size: 24px;
    color: #f9faf8;
}

.sade {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.hero-button {
    background-color: #3882F6;
    color:#f9faf8;
    border-radius: 25px;
    padding: 0;
    height: 30px;
    width: 100px;
}

.middle {
    display: flex;
    flex-direction: column;
    color:#1F2937;
}

.bmw-pics {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
}

.bmw-text img {
    height: 260px;
    border-radius: 10px;
    width: 250px;
}

.bmw-text p {
    text-align: center;
}

.title {
    text-align: center;
}

.above-footer {
    background-color: #e5e7eb;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.above-footer-p1 p,
.above-footer-p2 p {
    font-size: 36px;
}

.above-footer-p2 {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
}

.above-footer-p1 p {
    font-style: italic;
    margin-top: 100px;
    color: #1F2937;
    display: flex;
    align-items: center;
    justify-content: center;
}

.last-space {
    color: #f9faf8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blue-box {
    display: flex;
    background-color: #3882F6;
    width: 800px;
    margin: 50px;
    flex-direction: column;
    padding: 50px;
    border-radius: 15px;
}

.last-button {
    align-self: flex-end;
    padding:5px 25px 5px 25px;
    color:#F9FAF8;
    background-color: #3882F6;
    border-radius: 10px;
    border-color: #F9FAF8;
    justify-content: center;
}

.footer {
    background-color: #1F2937;
    color: #F9FAF8;
    display: flex;
    justify-content: center;
    align-items: center;
}

问题解决办法 #

这是浏览器默认给<body>标签添加了默认margin导致的，和像素设置无关。只需在CSS开头添加以下代码即可解决：

/* 全局样式重置，清除默认边距并统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

如果只想针对body处理，也可以单独设置：

body {
  margin: 0;
}

补充说明 #

• *选择器会重置所有元素的默认margin和padding，避免其他浏览器默认样式干扰布局
• box-sizing: border-box让元素的padding和border不会额外增加元素宽度，后续布局时更易控制尺寸

内容的提问来源于stack exchange，提问作者A Soggy Crouton