title: Margin on right side not showing
body: <p>I am new to HTML and CSS and I have a question in regards to margin.</p>
  
  <p>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!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="full-width banner_container1"&gt;
    &lt;div class="content1"&gt;
      &lt;div class="top-text-container"&gt;
        &lt;h1&gt;Discover the Best Outdoor &lt;br&gt; Adventures Near you&lt;/h1&gt;
        &lt;div class="path"&gt;
          &lt;img src="images/Path.png" alt=""&gt;
        &lt;/div&gt;
        &lt;p&gt;ADVENTURE TIMES IS THE BEST PLACE TO FIND OUTFOOR &lt;br&gt; ADVENTURES ANYWEHRE YOU GO.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="appstore-btn-container"&gt;
        &lt;img src="images/appstore-white.png" alt="appstore button" width="230px"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>