Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html:
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="logoDiv">
<img src="img/logo.png" class="logo" alt="">
</div>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#features" class="page-scroll">Specials</a></li>
<li><a href="#about" class="page-scroll">About</a></li>
<li><a href="#restaurant-menu" class="page-scroll">Menu</a></li>
<li><a href="#contact" class="page-scroll">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<!-- Header -->
<header id="header">
<div class="intro">
<div class="overlay">
<div class="container">
<div class="row">
<div class="intro-text">
<h1>GRAZE CAFE</h1>
<p>Reservations: 0448708939</p>
</div>
</div>
</div>
</div>
</div>
</header>
css:
.intro {
display: table;
width: 100%;
padding: 0;
background: url(../img/banner.jpg) center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .overlay {
background: rgba(0,0,0,0.4);
}
.intro h1 {
font-family: 'Old Standard TT', serif;
color: #fff;
font-size: 9em;
font-weight: 90;
margin-top: 0;
}
@media (max-width: 500px) {
#header{
width: 100%
}
}
}
.intro span {
color: #a7c44c;
font-weight: 600;
}
.intro p {
color: #fff;
font-size: 24px;
font-weight: 400;
margin-top: 150px;
}
.hide{
visibility: hidden;
}
header .intro-text {
padding-top: 200px;
padding-bottom: 50px;
text-align: center;
}
I'm struggling to pinpoint which element is causing the intro section to extend beyond the screen width at 414px. None of the elements have fixed widths except for the logo in the nav bar. Even when I set the elements' width to around 300px, there is still excess white space on the page.