title: Why is there a horizontal scrollbar on my website?
body: <p>So everywhere i go to this code does something weird with the vertical scrollbar. If you know what it is tell me the error and how i can solve it.</p>
  
  <p>The error is probably in the <strong>css</strong> but I included all the code just so you can take a look. </p>
  
  <p>I'll just give all the code and you tell me what's wrong. Thx</p>
  
  <p>I need to write some random words so I can post this.</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>*::selection {
    background: #333;
  }
  *::-moz-selection {
    background: #333;
  }
  @font-face {
      font-family: 'watchmen';
      src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  
  body {
   background-color: red;
  
   font-family: 'Hind', sans-serif;
  }
  * {
   padding: 0;
   margin: 0;
  }
  
  #titletext {
   font-family: watchmen;
   color: #FEEE2E;
   font-size: 6.5vw;
  }
  #logo_span {
   color: #146EAD;
  }
  #linktotwo {
   text-decoration: none;
   color: #146EAD;
  }
  #title {
   
   position: absolute;
   width: 82vw;
   height: 12vh;
   text-align: center;
   line-height: 12vh;
   top: 50%;
   left: 50%;
   margin-top: -6vh;
   margin-left: -41vw;
  }
  #one {
   background-color: #030200;
   background-size: cover;
   width:100vw;
      height: 100vh;
  }
  #two {
   height: 100vh;
   width: 100vw;
   background-color: #0B4F77;
  }
  #favul {
   list-style-type: decimal;
      font-family: 'Josefin Sans', sans-serif;
      padding-left: 8vw;
      margin: 6.5vh auto;
  }
  #favul &gt; li {
   margin: 1vw 0;
  }
  #favtit {
   text-align: center;
  }
  #fav {
   border: 1px solid #000;
   position: absolute;
   font-size: 48px;
   left: 50%;
   padding: 15px;
   width: 600px;
   height: 50vh;
   margin-left: -316px;
   overflow: hidden;
   top: 150vh;
   margin-top: -32vh;
   background-color: #0A4366;
  }
  
  #flash {
   color: #FF4500;
  }
  #bat {
   color: #000;
  }
  #arrow {
   color: green;
  }
  #manh {
   color: #1580c1;
  }
  
  #images {
   position: absolute;
   bottom: 0%;
   left: 0%;
  }
  #images &gt; img {
   width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;I Love DC Comics&lt;/title&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /&gt;
   &lt;link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /&gt;
   &lt;meta name="description"
   content="I just love DC Comics and I write some stuff on this Website"/&gt;
   &lt;meta name="robots" content="index,follow"/&gt; 
   &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet"&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet"&gt; 
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="jumpto.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="one"&gt;
  &lt;div id="title"&gt;
  &lt;p id="titletext"&gt;ONLY DC &lt;span id="logo_span"&gt;&lt;a id="linktotwo" href="#two"&gt;&amp;#164;&lt;/a&gt;&lt;/span&gt; COMICS!&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="two"&gt;
  &lt;div id="fav"&gt;
  &lt;p id="favtit"&gt;My Favorite Characters&lt;/p&gt;
  &lt;ul id="favul"&gt;
   &lt;li&gt;The &lt;span id="flash"&gt;Flash&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span id="bat"&gt;Batman&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span id="arrow"&gt;Green&lt;/span&gt; Arrow&lt;/li&gt;
   &lt;li&gt;Dr. &lt;span id="manh"&gt;Manhattan&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="images"&gt;
  &lt;img src="characters.jpeg" alt="characters"/&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>