When I resize my webpage to a max-width of 800px, the website adds a horizontal scroll bar which scrolls to a white a screen. I am not sure what causes that to happen and would like for it to not happen. My code is below.
body {
margin: 0;
}
.Header {
position: fixed;
z-index: 1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {}
.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;
}
@media (max-width: 1200px) {
.header {
text-align: left !important;
padding-left: 20px;
}
.img-fluid {
height: 500px;
}
.header2 {
text-align: left;
}
}<!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=p reorder>
<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>
<div class="section1" style="background-color: black; color: white; padding-top: 150px;">
<a class="header1" style="padding-left: 200px; display:inline-block; width:85.2%">
<img src="FoldingIcon.PNG" height="45px">
<h1 class="header2" style="font-family: Verdana;font-size: x-large; text-align: start;">Some Header</h1>
<p style="margin-bottom: 200px; font-family: Verdana; color: gray;">
</p>
<img src="Backpack.PNG">
<h2 style="font-family: Verdana; font-size: x-large; text-align:start">Some Header</h2>
<p style="margin-bottom: 300px"></p>
</a>
<p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%;">
_________________________________________________________________________________________________________________________________________________________________________________________</p>
<h1 style="font-family: Verdana;font-size: x-large; text-align: start;padding-bottom: 400px; padding-left: 200px; display:inline-block;
padding-top: 150px;">Completely Customizable</h1>
</div>The problem is with this paragraph. You don't have any spaces between those characters, so it won't break or cut off if the viewport is more narrow than the width of that output.
<p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%;">_________________________________________________________________________________________________________________________________________________________________________________________</p>
Not sure what you're trying to do there exactly... I'm assuming draw some sort of border/rule? If so, you should use a border or hr or something instead.
A quick and easy way to fix your layout while leaving that element alone is just to add overflow:hidden; to it. http://codepen.io/anon/pen/VpOgpj