title: Why does the width of my web page not fill the entire screen width?
body: <p>I have the majority of my code wrapped in a container with the following style:</p>
  <pre><code>.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
  padding-left: 0;
  padding-right: 0;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  }
  </code></pre>
  <p>This is to enable me to scroll smoothly from one section of the page that takes up a height of 100vh to another. (That is why I have overflow: auto in my styling). However, when I add the &quot;overflow: auto&quot;, the web page stops being the full width of my window (as shown in the image).</p>
  <p><a href="https://i.stack.imgur.com/mDAXx.png" rel="nofollow noreferrer">screenshot of problem</a></p>
  <p>When I remove the &quot;overflow: auto&quot; and replace it with &quot;overflow: none&quot;, then the width is fixed but my scrolling feature now longer works.</p>
  <p>HTML Code here:</p>
  <pre><code>&lt;body class=&quot;container-fluid&quot;&gt;
  &lt;!-- Main Page --&gt;
  &lt;div class=&quot;container&quot;&gt;
  
      &lt;div class=&quot;section&quot;&gt;
          &lt;div class=&quot;main row vertical-center&quot;&gt;
              &lt;div class=&quot;main-image col-md-6&quot;&gt;
                  &lt;img src=&quot;rec/img/placeholder-image.png&quot; alt=&quot;client_image&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;main-text align-items-center col-md-6&quot;&gt;
                  &lt;h2 class=&quot;p-3&quot;&gt;
                      Name Lastname
                  &lt;/h2&gt;
                  &lt;span class=&quot;align-bottom bottom-text-main&quot;&gt;
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
                  &lt;/span&gt;
              &lt;/div&gt;
  
              &lt;span id=&quot;contact&quot;&gt; 
                  &lt;!-- &lt;ul class=&quot;contact-icons&quot; style=&quot;list-style-type:none;&quot;&gt;
                      &lt;li&gt;&lt;/li&gt;&lt;a href=&quot;https:/www.facebook.com&quot; class=&quot;fa fa-facebook&quot; target=&quot;blank&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;https://www.instagram.com&quot; class=&quot;fa fa-instagram&quot; target=&quot;blank&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;mailto:example@gmail.com&quot; class=&quot;fas fa-envelope&quot; target=&quot;blank&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt; --&gt;
                  &lt;i&gt;&lt;a href=&quot;https:/www.facebook.com&quot; class=&quot;fa fa-facebook&quot; target=&quot;blank&quot;&gt;&lt;/a&gt;&lt;/i&gt;
                  &lt;i&gt;&lt;a href=&quot;https://www.instagram.com&quot; class=&quot;fa fa-instagram&quot; target=&quot;blank&quot;&gt;&lt;/a&gt;&lt;/i&gt;
                  &lt;i&gt;&lt;a href=&quot;mailto:example@gmail.com&quot; class=&quot;fa fa-envelope&quot; target=&quot;blank&quot;&gt;&lt;/a&gt;&lt;/i&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Information --&gt;
      &lt;div class=&quot;section info&quot;&gt;
          &lt;div class=&quot;information p-4 pb-0&quot; id=&quot;information&quot;&gt;
              &lt;h1 &gt;More about me.&lt;/h1&gt;
              &lt;br&gt;
                  &lt;div class=&quot;background ml-3&quot;&gt;
                      &lt;h5 class = &quot;pb-1&quot;&gt;Background&lt;/h5&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;skills ml-3&quot;&gt;
                      &lt;h5 class=&quot;pb-1&quot;&gt;Skills&lt;/h5&gt;
                      &lt;ul&gt;
                      &lt;li&gt;Skill&lt;/li&gt;
                      &lt;li&gt;Skill&lt;/li&gt;
                      &lt;li&gt;Skill&lt;/li&gt;
                      &lt;li&gt;Skill&lt;/li&gt;
                      &lt;li&gt;Skill&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Experience --&gt;
      &lt;div class=&quot;section&quot;&gt;
          &lt;div class=&quot;experience p-3&quot; id=&quot;experience&quot;&gt;
              &lt;h1 class=&quot;pt-3&quot;&gt;Work experience&lt;/h1&gt;
              &lt;br&gt;
              &lt;div class=&quot;xp&quot;&gt;
                  &lt;div class=&quot;workxp p-3 ml-3&quot;&gt;
                      &lt;h4 class = &quot;pb-2&quot;&gt;Lorem, ipsum.&lt;/h4&gt;
                      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
                  &lt;/div&gt;
                  &lt;div class=&quot;workxp p-3 ml-3&quot;&gt;
                      &lt;h4 class = &quot;pb-2&quot;&gt;Lorem, ipsum.&lt;/h4&gt;
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
                  &lt;/div&gt;
                  &lt;div class=&quot;workxp p-3 ml-3&quot;&gt;
                      &lt;h4 class = &quot;pb-2&quot;&gt;Lorem, ipsum.&lt;/h4&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Additional Inforation --&gt;
      &lt;div class=&quot;section&quot;&gt;
          &lt;div class=&quot;additional-info p-3&quot; id=&quot;additional-info&quot;&gt;
              &lt;h1&gt;Additional Information&lt;/h1&gt;
              &lt;!-- &lt;h1 class=&quot;second-line-info&quot;&gt;Information&lt;/h1&gt; --&gt;
  
              &lt;div class=&quot;additional-info-text text-left&quot;&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
                  &lt;p&gt;Lorem, ipsum dolor.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Footer --&gt;
      &lt;div class=&quot;section&quot; id=&quot;footer&quot;&gt;
          &lt;footer class=&quot;page-footer font-small blue pt-4&quot;&gt;
              &lt;div class=&quot;container-fluid text-center text-md-left&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-md-6 mt-md-0 mt-3&quot;&gt;
                      &lt;h5 class=&quot;text-uppercase&quot;&gt;Name Lastname&lt;/h5&gt;
                      &lt;p&gt;Cliche Inspiritional Quote Here&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;!-- Grid column --&gt;
          
                  &lt;hr class=&quot;clearfix w-100 d-md-none pb-3&quot;&gt;
          
                  &lt;!-- Grid column --&gt;
                  &lt;div class=&quot;col-md-6 mb-md-0 mb-9&quot;&gt;
          
                      &lt;!-- Links --&gt;
                      &lt;h5 class=&quot;text-uppercase&quot;&gt;Contact Links&lt;/h5&gt;
              
                      &lt;ul class=&quot;list-unstyled&quot;&gt;
                          &lt;li&gt;
                              &lt;i&gt;&lt;a href=&quot;https:/www.facebook.com&quot; class=&quot;fa fa-facebook&quot; target=&quot;blank&quot;&gt;&lt;/a&gt; &lt;a href=&quot;https:/www.facebook.com&quot; target=&quot;blank&quot;&gt;Facebook&lt;/a&gt;&lt;/i&gt; 
                              
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;i&gt;&lt;a href=&quot;https://www.instagram.com&quot; class=&quot;fa fa-instagram&quot; target=&quot;blank&quot;&gt;&lt;/a&gt; &lt;a href=&quot;https:/www.intagram.com&quot; target=&quot;blank&quot;&gt;Instagram&lt;/a&gt;&lt;/i&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                          &lt;i&gt;&lt;a href=&quot;mailto:example@gmail.com&quot; class=&quot;fa fa-envelope&quot; target=&quot;blank&quot;&gt;&lt;/a&gt; &lt;a href=&quot;mailto:example@gmai;.com&quot; target=&quot;blank&quot;&gt;Email&lt;/a&gt;&lt;/i&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
          
                  &lt;/div&gt;
                  &lt;!-- Grid column --&gt;
          
          
              &lt;/div&gt;
              &lt;!-- Grid row --&gt;
          
              &lt;/div&gt;
              &lt;!-- Footer Links --&gt;
          
          &lt;/footer&gt;
      &lt;/div&gt;
      
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS file:</p>
  <pre><code>    body {
          color: var(--grey);
          width: 100%;
          padding: 0;
          margin: 0;
          min-width: fit-content;
      }  
  
      .container {
          position: relative;
          width: 100vh;
          height: 100vh;
          overflow: visible;
          padding-left: 0;
          padding-right: 0;
          scroll-behavior: smooth;
          scroll-snap-type: y mandatory;
      }
  
      .container .section {
          position: relative;
          height: 100%;
          width: 100%;
          scroll-snap-align: start;   
          /* background-blend-mode: multiply; */
      }
  
      /* .container.section:nth-child(1) {
          background: ;
          background-size: cover;
          background-attachment: fixed;
      } */
  
  
  
      .main {
          background-color: var(--white);
          padding-left: 0%;
          padding-right: 0%;
          margin-top: 0rem;
          margin-bottom: 0rem;
          height: 100vh;
      }
  
      .main-image {
          padding-top: 0%;
          margin-left: 0%;
          padding-right: 0;
          margin-bottom: 2rem;
          height: 50%;
      }
  
      .main-image img {
          height: 100%;
          width: 100%;
          margin-left: 0%;
          margin-right: 0%;
      }
  
      .main-text {
          padding-bottom: 2rem;
          height: 50%;
          /* margin-left: 5%;
          margin-right: 5%; */
      }
  
      .main-text p {
          vertical-align: middle;
      }
  
  
  
      .information {
          background-color: var(--soft);
          height: 100vh;
          padding-top: 0;
      }
  
      .experience {
          background-color: var(--white);
          height: 100%;
      }
  
      .information h1 {
          padding-top: 1rem;
      }
  
  
  
      .background {
          padding-top: 3rem;
      }
  
      .skills ul {
          list-style-type: none;
      }
  
      .skills {
          padding-top: 3rem;
      }
  
      .additional-info {
          background-color: var(--soft);
          height: 100vh;
          padding-top: 1rem;
      }
  
      .additional-info h1 {
          color: var(--grey);
      }
  
      .second-line-info {
          margin-left: 5rem;
      }
  
      .additional-info-text {
          text-align: center;
          padding-left: 2rem;
          padding-right: 2rem;
      }
  
      .additional-info-text p {
          margin-top: 1.5rem;
          margin-bottom: 1.5rem;
      }
  
      #footer {
          height: 10vh;
      }
  
      .list-unstyled i {
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      }
  
  
      @media only screen and (min-width: 600px) {
          html {
              width: 100%;
          }
  
          body {
              width: 100%;
              padding: 0;
          }
  
          .main {
              padding-top: 0%;
              width: 100%;
          }
  
          .vertical-center {
              display: flex;
              align-items: center;
          }
  
          .main-image {
              height: 100%;
              margin-top: 15%;
          }
  
          .main-image img {
              border-radius: 50%;
              height: 50%;
              width: 75%;
          }
  
          .main-text {
              height: 100%;
              margin-top: 20%;
          }
  
          .main-text h2 {
              margin-bottom: 3rem;
          }
  
          #contact {
              position: absolute;
              bottom: 2%;
              right: 2%;
          }
  
          .contact-icons {
              padding: 0;
              font-size: 2em;
              display: table-cell;
          }
  
          .fa {
              padding-left: 1rem;
              padding-right: 1rem;
              text-align: center;
              text-decoration: none;
              border-radius: 50%;
          }
  
          .contact a {
              display: inline-block;
              width: 1.2em;
              transition: all .2s ease-in-out;
          }
          
          a:hover {
              text-decoration: none;
          }
  
          .additional-info {
              text-align: left;
              justify-content: left;
          }
  
          .additional-info-text p {
              margin-top: 2rem;
          }
  
          /* BEVAN ONDER */
          /* General */
          body, html
          {
              width: 100%;
              padding: 0;
              margin:0;
          }
  
          .container{
              width: 100%;
          }
  
          .container.section{
              width: 100%;
          }
          
  
  
          /* Information page(s) */
  
          .background{
              
              padding-top: 2rem;
          }
  
          .skills{
          
              padding-top: 2rem;
          }
  
          .background p{
              width: 50%;
          }
          
  
      } 
  </code></pre>
  <p>Is there a possible fix for this?</p>