title: My width is bigger than my screen, but body and html are set to 0 padding and margin and 100% width
body: <p>After removing bootstrap I've run into this issue with the width of my page being larger than the screen, and having a horizontal scroll bar as a result. I thought setting body, html to 0 padding and margin as well as 100% width would be okay but the issue persists..</p>
  
  <p>SOLUTION EDIT: I had images that were wider than the view, so I needed to set <code>box-sizing: border-box</code> to contain the images in the parent. Then I inherited this for all elements. So now the top of my CSS is: </p>
  
  <pre><code>body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
  }
  
  * {
      box-sizing: inherit;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>@{
      ViewBag.Title = "Home Page";
  }
  &lt;div class="main"&gt;
      &lt;div class="content"&gt;
          &lt;div id="welcome" class="page"&gt;
              &lt;h1&gt;asasd&lt;/h1&gt;
              &lt;p&gt;
                  test3
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="asdasd" class="page" data-original="/Images/asdh.jpg"&gt;
              &lt;h1&gt;asdasd&lt;/h1&gt;
              &lt;p&gt;
                  test2
              &lt;/p&gt;
              &lt;div class="vfd"&gt;&lt;/div&gt;
              &lt;div class="measurment"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="test2" class="page" data-original="/Images/test.jpg"&gt;
              &lt;h1&gt;&lt;/h1&gt;
              &lt;p&gt;test
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
  }
  
  .main {
      width: 100%;
      height: 100%;
  }
  
  .content {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      height: 300vh;
  }
  
  .page {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      position: relative;
      width: 100%;
      text-align: center;
      vertical-align: middle;
      font-size: 18px;
      padding-left: 25%;
      padding-right: 25%;
  }
  </code></pre>