title: Why is a horizontal scroll bar added to my webpage when I add a h1?
body: <p>I was working an a website when I stopped and noticed there was a horizontal scroll bar. It looked as though something was jolting out to the right but I couldn't find any thing with my devtools. So I started commenting out my html and css in sections starting from the bottom to see exactly when and where the scroll bar is added. And its on line 43 in the html. It's a h1 element, and once removed the scroll bar goes away?? Why is this happening?</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-js lang-js prettyprint-override"><code>const ham = document.querySelector('.nav-box');
  const menu = document.querySelector('.menu');
  const menuClose = document.querySelector('#menu-close');
  
  ham.addEventListener('click', function() {
   ham.classList.add('ham-open');
   menu.style.marginLeft = '50px';
  })
  
  menuClose.addEventListener('click', function() {
   ham.classList.remove('ham-open');
   menu.style.marginLeft = '-700px';
  
  })
  
  
  
  
  window.sr = ScrollReveal();
  
  sr.reveal('.info', {
   duration: 2000,
   origin: 'bottom'
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  
  .header {
   background: black;
   width: 100vw;
   height: 100vh;
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
   display: flex;
  }
  
  .nav-wrap {
   flex-basis: 40%;
  }
  
  .nav-wrap i {
   color: white;
   font-size: 2rem;
   position: absolute;
   right: -33px;
   top: 0px;
   transition: all .1s ease;
  }
  
  .nav-wrap i:hover {
   cursor: pointer;
   transform: scale(1.15);
  }
  
  .nav-box {
   margin-left: 50px;
   margin-top: 100px;
   max-width: 70px;
   cursor: pointer;
   position: fixed;
   z-index: 10;
  }
  
  .b1, .b2, .b3 {
   width: 70px;
   height: 8.5px;
   border-radius: 5px;
   background-color: #fff;
   margin-bottom: 10px;
   transition: all .15s ease;
  }
  
  .b1 {
   background-color: #56ff47;
  }
  
  .b3 {
   background-color: #ff4c4c;
  }
  
  .ham-open .b1 {
   background-color: #56ff47;
   transform: translateY(100px);
   position: relative;
   z-index: 1;
  }
  
  .ham-open .b2 {
   transform: translateY(81.5px);
   width: 110px;
   position: relative;
   left: 60px;
   z-index: 0;
  }
  
  .ham-open .b3 {
   background-color: #ff4c4c;
   transform: translateY(63px);
   width: 140px;
   position: relative;
   left: 160px;
   z-index: 2;
  }
  
  .menu {
   display: flex;
   border-left: 8px solid #56ff47;
   flex-direction: column;
   background-color: #fff;
   margin-left: -700px;
   width: 292px;
   padding-top: 10px;
   padding-bottom: 10px;
   position: fixed;
   border-radius: 5px;
   top: 225px;
   transition: all .15s;
   z-index: 10;
  }
  
  .menu a {
   text-decoration: none;
   color: limegreen;
   font-family: 'Kumar One Outline';
   font-size: 2.3rem;
   text-align: center;
   margin-top: 12px;
   margin-bottom: 12px;
   transition: all .5s ease;
  }
  
  a:hover {
   color: #007001;
  }
  
  .info-wrap {
   flex-basis: 60%;
  }
  
  .info {
   font-family: 'Cedarville Cursive';
   color: white;
   font-weight: bold;
   font-size: 4.5rem;
   text-align: center;
   margin-top: 60px;
  }
  
  .logo-wrap {
   display: flex;
   justify-content: center;
   flex-direction: column;
  }
  
  .logo-wrap div {
   font-family: 'Staatliches';
   color: white;
   font-size: 13rem;
   font-weight: bold;
   letter-spacing: 10px;
   margin-bottom: -5rem;
   position: relative;
   margin-left: auto;
   margin-right: auto;
  
  }
  
  
  
  /*------ABOUT------*/
  
  
  
  /*.about-section {
   background-color: #17a832;
   width: 100vw;
  }*/
  
  /*.about-section h1 {
   text-align: center;
   font-size: 4.5rem;
   margin-top: 0;
   margin-bottom: 30px;
   padding-top: 15px;
   color: white;
   font-family: 'Cedarville Cursive';
   font-weight: bold;
  }
  
  .about-wrap {
   display: flex;
   padding-bottom: 150px;
  }
  
  .about-info, .image-slider-wrap {
   flex-basis: 50%;
  }
  
  .about-info p {
   color: white;
   font-family: 'Josefin Sans';
   font-size: 2rem;
   margin-left: 100px;
   margin-bottom: 0;
   margin-top: 0;
  }
  
  .image-slider {
   width: 650px;
   height: 400px;
   background-color: red;
   border-radius: 13px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
  }
  
  .image-slider i {
   color: white;
   font-size: 5rem;
   position: absolute;
   top: 50%;
   margin-top: -40px;
   transition: all .1s ease;
   cursor: pointer;
  }
  
  #left {
   transform: rotate(-90deg);
   left: -30px;
  }
  
  #right {
   transform: rotate(90deg);
   right: -30px;
  }
  
  #left:hover {
   transform: rotate(-90deg) scale(1.3);
  }
  
  #right:hover {
   transform: rotate(90deg) scale(1.3);
  }
  */
  
  /*------MENU------*/
  
  
  /*.menu-section {
   background-color: #edb12f;
   display: flex;
   width: 100vw;
   top: -60px;
   position: relative;
   clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
  }
  
  .menu-section h1 {
   font-size: 9.5rem;
   margin-top: 0;
   position: absolute;
   left: 100px;
   margin-bottom: 60px;
   padding-top: 15px;
   color: white;
   font-family: 'Cedarville Cursive';
   font-weight: bold; 
  }
  
  .column-left, .column-right, .column-middle {
   flex-basis: 33.33%;
   margin-top: 230px;
   outline: 1px solid green;
  }
  
  .column-left {
   display: flex;
   justify-content: flex-end;
  }
  
  .column-left .menu-h2:after {
   display: block;
   content: "beans and rice included";
   color: white;
   font-size: 1.5rem;
   font-family: 'Josefin Sans';
   margin-top: -25px;
  }
  
  .column-middle h2:after, .column-right h2:after {
   content: "";
   display: block;
   width: 100%;
   height: 3px;
   background-color: white;
   border-radius: 3px;
   margin-top: -25px;
  }
  
  .column-middle {
   display: flex;
   justify-content: center;
  }
  
  .column-right {
   display: flex;
   justify-content: flex-start;
  }
  
  .column {
   outline: 1px solid green;
   min-width: 420px;
   display: flex;
   flex-direction: column;
  }
  
  .column h2 {
   display: inline-block;
   align-self: center;
   font-family: 'Cedarville Cursive';
   color: #17a832;
   font-size: 3rem;
  }
  
  .row {
   font-family: 'Josefin Sans';
   font-size: 1.5rem;
  }
  
  .row div {
   display: flex;
   justify-content: space-between;
  }
  
  .menu-h2 {
   text-align: center;
  }*/
  
  /*.design-left, .design-right {
   position: absolute;
  }*/
  
  /*.design-right {
   right: 0;
   transform: rotate(180deg);
  }*/
  
  /*.arrow-right {
      width: 0; 
      height: 0; 
      border-top: 35px solid transparent;
      border-bottom: 35px solid transparent; 
      border-left: 70px solid green;
    position: relative;
    top: -16px;
  }
  
  .arrow-left {
    width: 0; 
    height: 0; 
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;  
    border-right:70px solid limegreen;
    position: relative;
    top: 20px; 
  }
  
  .arrow-top {
      width: 0; 
      height: 0; 
      border-top: 35px solid transparent;
      border-bottom: 35px solid transparent; 
      border-left: 70px solid #20a04b;
    position: relative;
    top: -121px;
    left: 70px;
  }
  
  .top-middle {
   position: relative;
   top: -130px;
  }
  
  .bottom-middle .arrow-left {
   top: -40px;
  }
  
  .bottom-middle .move {
   top: -75px;
  }
  
  .bottom {
   position: relative;
   top: -48px;
  }
  
  .bottom .arrow-left {
   top: -50px;
  }*/
  
  
  /*------HOURS------*/
  
  /*.hours-section {
   background-color: green;
   width: 100vw;
   height: 100px;
  }*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Mexican Restaurant&lt;/title&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet"&gt;
   &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"&gt;
   &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;header&gt;
    &lt;div class="header"&gt;
     &lt;div class="nav-wrap"&gt;
      &lt;div class="nav-box"&gt;
       &lt;div class="b1"&gt;&lt;/div&gt;
       &lt;div class="b2"&gt;&lt;/div&gt;
       &lt;div class="b3"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="menu"&gt;
       &lt;a href="#"&gt;Home&lt;/a&gt;
       &lt;a href="#"&gt;About&lt;/a&gt;
       &lt;a href="#"&gt;Menu&lt;/a&gt;
       &lt;a href="#"&gt;Hours&lt;/a&gt;
       &lt;a href="#"&gt;Contact&lt;/a&gt;
       &lt;a href="#"&gt;Location&lt;/a&gt;
       &lt;i class="fas fa-times" id="menu-close"&gt;&lt;/i&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="info-wrap"&gt;
      &lt;p class="info"&gt;Authentic Mexican Food&lt;/p&gt;
  
      &lt;div class="logo-wrap"&gt;
       &lt;div&gt;YOUR&lt;/div&gt;
       &lt;div&gt;LOGO&lt;/div&gt;
       &lt;div&gt;HERE&lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/header&gt;
   &lt;main&gt;
    &lt;div class="about-section"&gt; 
     &lt;h1 class="about-h1"&gt;About Us&lt;/h1&gt;
    &lt;/div&gt;
  
   &lt;/main&gt;
   &lt;footer&gt;
    
   &lt;/footer&gt;
    &lt;script src="https://unpkg.com/scrollreveal"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>