Why is my header section too wide for mobile?

Question

Im making this website and its responsive on all other sizes but as soon as I get to around 414px in width the intro section is too wide for the screen, anyone know whats causing this? 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;
}

Im not sure what element in the section is causing the section to be too wide. None of the elements have a fixed width except for the logo in the nav bar and even when I set the elements width to be around 300px then there is still empty white space that on the page.

Answer 1

you are facing this issue as you used em for font-size which makes it have a fixed calculated size for any browser as em is calculated relative to the font-size of the element. So if you want this webpage to be responsive use length measurements such as vw,vh or with %.