html - 右侧边距不显示

Question

我是 HTML 和 CSS 的新手，我有一个关于边距的问题。

我在页面的左侧和右侧添加了 40px 的边距，但是页面右侧的边距没有显示。会喜欢一些帮助和建议，为什么会发生这种情况。谢谢!

html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
}
@font-face {
  font-family: 'Apercu-Bold';
  src: url('../fonts/Apercu-Bold.otf');
}
@font-face {
  font-family: 'Apercu-Regular';
  src: url('../fonts/Apercu-Regular.otf');
}
.full-width {
  width: 100%;
  box-sizing: border-box;
  margin-left: 40px;
  margin-right: 40px;
}
.appstore-btn-container {
  position: absolute;
  text-align: center;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

/*SECTION ONE*/

.banner_container1 {
  background-image: url(../images/adventuretimes-hero.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  border-radius: 8px;
  height: 600px;
}
.content1 {
  padding: 220px 10%;
  text-align: center;
}
.content1 h1 {
  color: white;
  font-size: 50px;
  font-family: 'Apercu-Bold';
  line-height: 60px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.content1 p {
  margin-top: 20px;
  text-align: center;
  color: white;
  font-family: 'Apercu-Bold';
  font-size: 12px;
  letter-spacing: 1.3px;
  line-height: 25px;
}
.top-text-container {
  position: absolute;
  text-align: center;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.path {
  vertical-align: middle;
}
.path img {
  vertical-align: middle;
}

<section class="full-width banner_container1">
  <div class="content1">
    <div class="top-text-container">
      <h1>Discover the Best Outdoor <br> Adventures Near you</h1>
      <div class="path">
        <img src="images/Path.png" alt="">
      </div>
      <p>ADVENTURE TIMES IS THE BEST PLACE TO FIND OUTFOOR <br> ADVENTURES ANYWEHRE YOU GO.</p>
    </div>
    <div class="appstore-btn-container">
      <img src="images/appstore-white.png" alt="appstore button" width="230px">
    </div>
  </div>
</section>

Answer 1

您想将 .full-width 设置为具有 100% 的最大宽度。相对于正常宽度:100%；

.full-width {
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 40px;
  margin-right: 40px;
}

宽度不包括填充、边距或边框，因此它占用屏幕的宽度并在每一端添加 40 像素(因此溢出)。如果您在 body 或 html 中设置了宽度，您的部分将采用该宽度的 100%，并向其添加 40px。最大宽度防止 section 元素占用超过 100% 的页面，包括边距、填充和边框。