Bootstrap Responsive navbar Link Alignment and Style Issue

Question

I'm having a problem with the Bootstrap navbar when the browser is collapsed. Everything works fine as in, the content response and the button appears, but when the button is pressed the links are not dropping under the navbar-brand, instead they are aligning in the middle beside the navbar-brand. It also does not seem to be picking up any, or the correct styling ie the font is size isn't reducing. Any idea what this is? I know it's something simple but I just can't see it!!

Thanks. (body code below)

  <nav class = "navbar navbar-inverse navbar-fixed-top">


     <div class = "container">

        <div class = "nav-header">
           <a href = "#" class = "navbar-brand">Site Title</a>

           <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse">

              <span class = "icon-bar"></span>
              <span class = "icon-bar"></span>
              <span class = "icon-bar"></span>

           </button>

        </div>

        <div class = "collapse navbar-collapse" id="navHeaderCollapse">

           <ul class = "nav navbar-nav navbar-right">

              <li class = "active"><a href = "#">Home</a></li>
              <li class = "active"><a href = "#">About</a></li>

              <li class = "dropdown active">

                 <a class = "#" class = "dropdown-toggle" data-toggle = "dropdown">Media</a>

                 <ul class = "dropdown-menu">
                    <li><a href = "#">SubOne</a></li>
                    <li><a href = "#">SubTwo</a></li>
                    <li><a href = "#">SubThree</a></li>
                    <li><a href = "#">SubFour</a></li>
                 </ul>
              </li>

              <li class = "active"><a href = "#">Contact</a></li>

              </ul>

           </div>

     </div>

  </nav>

Answer 1

Problem is wrong class name:

<div class = "nav-header"> 

change to 

<div class = "navbar-header">

http://jsfiddle.net/8pLven4s/