I am having an overflow issue with my website in split screen at max-width 1200px

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.

HTML
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Some Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel = "stylesheet" href="stylesheet.css">
</head>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 class = "header" style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Some Title</h1></a>
        <style>
            a{text-decoration: none;}
            a:hover{
                text-decoration:none;
            }
        </style>

    </a>

    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" alt="First slide">

        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

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;
    }
}

Solution

You should probably take a look at your code and see what's going on. Something probably has to much padding or margin and is forcing the horizontal bar.

The "easy" way would be to just hide the overflow on the body element and your horizontal bar will go away.

body {
   overflow-x:hidden;
}