Bootstrap navbar spacing issue

Question

Please take a look at the Homepage on my website. The navbar spacing is all over the place. I'm not sure where I'm going wrong with my code.

I am linked to the bootstrap CDN and have no custom CSS file of my own linked to it.

I tried to change the settings in sublime text 3 to change the indent to using indent rather than spaces.

I have also re-written the code. The only thing that seems to work is if I do not put any of the elements of my navbar on a new line. No line drops; only continuous coding with no spaces.

Any help is much appreciated.

Thank you.

My HTML:

<div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a href="/" class="navbar-brand">Kellumonline</a>
            <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 class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="/">Home</li>
                    <li><a href="tech/">Tech</li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="gaming/">Gaming <i class="caret"></i></a>
                            <ul class="dropdown-menu">
                            <li><a href="#">AGGINAYR</li>
                                <li><a href="#">XB1</li>
                                <li><a href="#">PS4</li>
                                <li><a href="#">ANDROID</li>
                            </ul>
                    </li>
                    <li><a href="skate/">Skate</a></li>
                    <li><a href="contact/">Contact</a></li>
                </ul>
            </div>
        </div>
</div>

Answer 1

Your issue is that you are not closing your tag's in your list groups. Looking at your html you have the following:

    <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="/">Home</li>
                <li><a href="tech/">Tech</li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="gaming/">Gaming <i class="caret"></i></a>
                        <ul class="dropdown-menu">
                        <li><a href="#">AGGINAYR</li>
                            <li><a href="#">XB1</li>
                            <li><a href="#">PS4</li>
                            <li><a href="#">ANDROID</li>
                        </ul>
                </li>
                <li><a href="skate/">Skate</a></li>
                <li><a href="contact/">Contact</a></li>
            </ul>

Your HTML looks like this:

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

You should have:

//added closing tag for a: </a>
<li class="active"><a href="/">Home</a></li>

Using your header code:

<div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a href="/" class="navbar-brand">Kellumonline</a>
            <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 class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                  <li class="active"><a href="/">Home</a></li>
                    <li><a href="tech/">Tech</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="gaming/">Gaming <i class="caret"></i></a>
                            <ul class="dropdown-menu">
                              <li><a href="#">AGGINAYR</a></li>
                              <li><a href="#">XB1</a></li>
                              <li><a href="#">PS4</a></li>
                              <li><a href="#">ANDROID</a></li>
                            </ul>

                        </li>
                    <li><a href="skate/">Skate</a></li>
                    <li><a href="contact/">Contact</a></li>
                </ul>
            </div>
        </div>
</div>