title: My page is scrolling to right. Why is it happening?
body: <p>I'm building a web page and working in the layout for small screens (<code>max-width: 600px</code>). When the screen gets narrow, the page gets a bit of horizontal scroll, as you can see in the code snippet, but it is unexpected for me. I am not finding anything wider than the viewport's width in my code. Why is there that scroll? </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>/* CSS from index_default.css */
  
  @charset "UTF-8";
  @import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&amp;display=swap');
  html, body, *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  body{
      font-family: 'Open Sans', sans-serif;
  }
  h2, h3{
      margin-top: 10px;
      margin-bottom: 10px;
  }
  a{
      text-decoration: none;
      transition: 0.2s linear;
  }
  header{
      background-color: rgb(93, 158, 76);
      display: flex;
      align-items: center;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  header h1{
      font-family: 'Doppio One', cursive;
      color: rgb(214, 245, 210);
  }
  nav a{
      color: rgb(230, 245, 229);
  }
  #menu{
      width: 30px;
  }
  #firstsection div a{
      font-weight: bold;
      border: 2px solid rgb(47, 119, 27);
      padding: 13px 30px;
      font-size: 16.5px;
      color: rgb(47, 119, 27);
  }
  #firstsection div a:hover{
      color: rgb(133, 163, 131);
      border: 2px solid rgb(133, 163, 131);
  }
  #lastsection img{
      display: block;
      margin-right: auto;
      margin-left: auto;
  }
  #lastsection div a:visited{
      color: blue;
  }
  footer{
      background-color: rgb(93, 158, 76);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      color: rgb(214, 245, 210);
  }
  
  /* CSS from index_small.css */
  
  @charset "UTF-8";
  body{
      width: 100vw;
      text-align: center;
  }
  header{
      padding-right: 10px;
      padding-left: 10px;
  }
  header img:first-of-type{
      width: 40px;
      margin-right: 5px;
  }
  header ul{
      display: none;
  }
  #menu{
      margin-left: 15vh;
  }
  #firstsection{
      background-color: rgb(220, 255, 211);
      height: 40vh;
      padding: 10% 20px 0;
      margin-bottom: 8%;
  }
  #firstsection div{
      margin-bottom: 30px;
  }
  #firstsection a{
      position: relative;
      top: 35px;
  }
  #middlesection{
      margin: 0 5vw;
  }
  #textboxes div{
      margin-bottom: 8%;
  }
  #lastsection img{
      width: 90%;
      margin-top: 8vh;
  }
  #lastsection div{
      position: relative;
      bottom: 18.5vh;
  }
  #lastsection div h2{
      font-size: 1.2rem;
  }
  footer img{
      width: 40px;
      margin-right: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pt-BR"&gt;
      &lt;head&gt;
          &lt;title&gt;Finances | Manage your money easily&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs."&gt;
          &lt;meta name="author" content="Bruno M. B. Sdoukos"&gt;
          &lt;meta name="keywords" content="finances, managing money, spending control"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_default.css"&gt;
          &lt;link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css"&gt;
          &lt;link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;a href="index.html"&gt;&lt;img src="Images/icons8-fund-accounting-80.png"&gt;&lt;/a&gt;
              &lt;a href="index.html"&gt;&lt;h1&gt;Finances&lt;/h1&gt;&lt;/a&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Register&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;a href="#"&gt;&lt;img src="Images/icons8-menu-50.png" id="menu"&gt;&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;main&gt;
              &lt;section id="firstsection"&gt;
                  &lt;div&gt;
                      &lt;h1&gt;Manage your money easily, anywhere, anytime.&lt;/h1&gt;
                      &lt;a href="#"&gt;Get started&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;section id="middlesection"&gt;
                  &lt;div id="textboxes"&gt;
                      &lt;div&gt;
                          &lt;img src="Images/icons8-increase-64.png"&gt;
                          &lt;h3&gt;Concrete data&lt;/h3&gt;
                          &lt;p&gt;Simple but concrete data that are the answer to all the quesions about your current money, spending and.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png"&gt;
                          &lt;h3&gt;Easy interface&lt;/h3&gt;
                          &lt;p&gt;An interface easy to use, made to you who want to manage your money faster and with no problems.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;img src="Images/icons8-natural-user-interface-2-filled-50.png"&gt;
                          &lt;h3&gt;Fast access&lt;/h3&gt;
                          &lt;p&gt;No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;section id="lastsection"&gt;
                  &lt;img src="Images/board-1362851_1280.png"&gt;
                  &lt;div&gt;
                      &lt;h2&gt;Register now and enjoy&lt;br&gt;the best of Finances.&lt;/h2&gt;
                      &lt;a href="#"&gt;Create an account&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/main&gt;
          &lt;footer&gt;
              &lt;img src="Images/icons8-fund-accounting-80.png"&gt;
              &lt;div&gt;
                  &lt;p&gt;A work of Bruno Sdoukos.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
      &lt;/body&gt; 
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>