bootstrap navbar items not aligning properly on smaller screens

Question

I am using Bootstrap to create a navbar. When I am looking at my page on a large screen, it works perfectly. However, when I try to shrink to a smaller screen, the nav bar gets taller and the brand icon and name on the left side and li items on the right side are not on the same line. Is there something wrong with my html or css code that would be causing this issue? Thank you so much in advance.

Here is my HTML code:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <!-- Left side -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            <a class="navbar-brand" href="index.html">
                <span class="logo"><img src="logo_example.png"/></span>
                <h4 class="navbar-text">My Website</h4>
            </a>
        </div>

        <!-- Right side -->
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Sign Up</i></a></li>
                <li><a href="login.html">Login</i></a></li>
            </ul>
        </div>
    </div>
</nav>

Here is my css code

.navbar-brand {
    margin: 0;
    padding: 0;
    width: 1000px;
}


.navbar-brand img {
    max-height: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}

span img {
    float: left;
}

Here is an image of what I am talking about.

Answer 1

You've given .navbar-brand a width of 1000px, so it's occupying too much of the width of its container on smaller viewports (smaller screens), leaving no space for your other elements. Note that Bootstrap's .container class is responsive – it has a smaller width on smaller viewports.

Removing the width attribute for navbar-brand should resolve your issue.

Answer 2

You need to remove the following CSS:

.navbar-brand {
    width: 1000px;
}

See demo here: http://codepen.io/sol_b/pen/PbxgXo