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

Question

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

You should definitely consider refactoring all of those inline-styles into your css — StefanBob, Apr 12 '17 at 18:46
As of now I am no longer working on this project anymore. I believe I was able to fix the issues I had, but I no longer have the refactored code I worked on last year. As this post has been down voted 3 times, I don't believe that it has been very helpful to the community and so I would like to close this post if possible, but there needs to be more votes to close it. Unless there is any other reason for why this post should stay open? — nosh, Jun 15 '18 at 18:03

score 1 · Accepted Answer · answered Apr 12 '17 at 18:48

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

score 0 · Answer 2 · answered Apr 12 '17 at 18:52

The best way to debug these kind of overflow problems is to put an outline around all the elements like this:

* {
    outline: 1px solid red;
}

I can see right away that your header is going off the screen and there are random p tags with horrible horizontal lines that are bleeding off the page as well.

I recommend cleaning up your code or starting over. Good luck.

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

2 Answers2