My Bootstrap Collapsible nav not behaving like I want

1

OK, so I finally have forced myself to start learning Bootstrap 3 this afternoon and so I have been following along a couple of tutorial videos. The video I am currently watching basically shows you what to do and then you attempt to type exactly what they are typing. They go to the browser every so often and show you what your website should be looking like.

Everything had been going smooth until I got to creating the collapsible menu (“the hamburger”). I have watched the video 3 times and stared at my html code for quite some time now, so I decided to ask the Bootstrap masters where my mistake is.

When the screen gets small, the hamburger menu shows up like it is supposed to. However, when I click on it, the menu items are supposed to be line up vertically right under the “Tech Site” link, but instead line up vertically beside the “Tech Site” link.

Here is a repl.it link to test it out.

2

You also need to nest the navbar brand and the hamburger icon in a <div class="navbar-header">

<div class="navbar-header">
    <a href="#" class="navbar-brand">Tech Site</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".hamburger">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
</div>
3

I guess the guy in the video was typing in one monitor and showing the results of the code from something already finished with the correct code in it already.

4