Why is my header section too wide for mobile?-CodePudding

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" >
  <div >
    <img src="img/logo.png"  alt="">
  </div>
  <div >
    <!-- Brand and toggle get grouped for better mobile display -->
    <div >
      <button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span >Toggle navigation</span> <span ></span> <span ></span> <span ></span> </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
     <div  id="bs-example-navbar-collapse-1">
      <ul >
        <li><a href="#features" >Specials</a></li>
        <li><a href="#about" >About</a></li>
        <li><a href="#restaurant-menu" >Menu</a></li>
        <li><a href="#contact" >Contact</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
</nav>
<!-- Header -->
<header id="header">
  <div >
    <div >
      <div >
        <div >
          <div >
            <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.

CodePudding user response：

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 %.