title: I am having an overflow issue with my website in split screen at max-width 1200px
body: <p>I am having an issue with my website. When I put it in split screen with max-width 1200px, there is a little bit of overflow with the website that creates a horizontal scrollbar on the website. I need some help on how to fix it. I may need to refactor my code, if that is the case, how should I go about doing it? My code is below.</p>
  <pre><code>HTML
  &lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Some Title&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link rel=&quot;icon&quot; href= &quot;Logo.png&quot; type=&quot;img/SVG&quot; style=&quot;width: 100%; height: 100%&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;link rel = &quot;stylesheet&quot; href=&quot;stylesheet.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;Header&quot; id=&quot;myHeader&quot;&gt;
      &lt;a class = &quot;headerLogo&quot;&gt;
          &lt;a href=&quot;file:///C:/Noah's%20stuff/Home.html&quot; &gt;&lt;h1 class = &quot;header&quot; style=&quot;color:white; font-family: Verdana; font-style: italic; font-size: x-large;
          text-align: center; padding-top: 20px&quot;&gt;Some Title&lt;/h1&gt;&lt;/a&gt;
          &lt;style&gt;
              a{text-decoration: none;}
              a:hover{
                  text-decoration:none;
              }
          &lt;/style&gt;
  
      &lt;/a&gt;
  
      &lt;div class=&quot;socialmedia&quot;&gt;
          &lt;a class = &quot;Facebook&quot;&gt;
              &lt;a href=&quot;https://www.facebook.com/&quot; target=&quot;_blank&quot;&gt;&lt;img src = &quot;https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png&quot; width=&quot;50px&quot; height=&quot;50px&quot;&gt;&lt;/a&gt;
          &lt;/a&gt;
          &lt;a class = &quot;Instagram&quot;&gt;
              &lt;a href=&quot;https://www.instagram.com/&quot;&gt;&lt;img src = &quot;https://images.seeklogo.net/2016/06/Instagram-logo.png&quot;  width=&quot;50px&quot; height=&quot;50px&quot;&gt;&lt;/a&gt;
          &lt;/a&gt;
          &lt;a class = &quot;Youtube&quot;&gt;
              &lt;a href=&quot;https://www.youtube.com/channel/&quot; target=&quot;_blank&quot;&gt;&lt;img src = &quot;https://images.seeklogo.net/2016/06/YouTube-icon.png&quot; width=&quot;50px&quot; height=&quot;50px&quot;&gt;&lt;/a&gt;
          &lt;/a&gt;
          &lt;a class = preorder&gt;
              &lt;button style = &quot;background-color: white;&quot;&gt;Pre-Order&lt;/button&gt;
  
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
      &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
          &lt;ol class=&quot;carousel-indicators&quot;&gt;
              &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
              &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
              &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class=&quot;carousel-item active&quot;&gt;
              &lt;img class=&quot;d-block img-fluid&quot; src=&quot;http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg&quot; alt=&quot;First slide&quot;&gt;
  
          &lt;/div&gt;
          &lt;div class=&quot;carousel-item&quot;&gt;
              &lt;img class=&quot;d-block img-fluid&quot; src=&quot;http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg&quot; alt=&quot;Second slide&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;carousel-item&quot;&gt;
              &lt;img class=&quot;d-block img-fluid&quot; src=&quot;https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg&quot; alt=&quot;Third slide&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
          &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
          &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;script src=&quot;https://code.jquery.com/jquery-3.1.1.slim.min.js&quot; integrity=&quot;sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js&quot; integrity=&quot;sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js&quot; integrity=&quot;sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
  CSS
  body {
      margin: 0;
  
  }
  
  .Header {
      position: fixed;
      z-index:1;
      width: 100%;
      height: 70px;
      background-color: #B2B2B2;
      text-align: right;
  }
  
  .socialmedia {
      position: fixed;
      right: 100px;
      top: 35px;
      transform: translate(0, -50%);
      display: flex;
      /* add this */
      align-items: center;
      /* add this */
  }
  
  .preorder button {
      background-color: white;
      border: 0;
      height: 35px;
      width: 110px;
      margin-left: 35px;
  }
  
  .footer {
      display: flex;
      align-items: center;
      width: 100%;
      height: 90px;
      background-color: black;
  }
  
  .img-fluid{
      width: inherit;
      height: 782px;
  }
  
  .mySlides~.mySlides {
      position: absolute;
      top: 0;
      left: 100%;
      transition: 0.7s;
  }
  .show-split {
      display: none;
  }
  #shot{
      margin-top: 50px;
      float: right;
  
  }
  #shot2 {
      float: right;
      margin-right: 10px;
  
  }
  @media (max-width: 1200px) {
      .header {
          text-align: left !important;
          padding-left: 20px;
      }
      .img-fluid {
          height:500px;
      }
      .header2 {
          text-align: left;
      }
      .hide-split {
          display: none;
      }
      .show-split {
          display: block;
      }
  }
  </code></pre>