Margin on right side not showing

Question

I am new to HTML and CSS and I have a question in regards to margin.

I have added a margin of 40px on the left and right side of my page, however, the margin on the right side of the page is not showing. Would love some help and advice as to why this is happening. Thanks!

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

You want to set .full-width to have a max-width of 100% .vs a normal width: 100%;

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

Width does not include padding, margin, or border so it's taking the width of your screen and adding 40px to each end (hence the overflow). If you have a set width in the body or html your section would have taken 100% of that width and added 40px to that. Max-width prevents the section element from consuming more then 100% of the page including margin, padding, and borders.

Answer 2

The HTML is set to 100% width as well as the container element. So your container element is taking 100% of the browser's width. It's then being pushed over to the right 40px by your margin-left. Your margin-right is probably there, it's just off the page.

I'd probably recommend using a container element that's full width with 40px padding and having another element inside of that to get the same desired effect.