Bootstrap Navbar Not Aligned, Especially In Mobile View

My navbar seems to go out of whack. It's especially evident when I view the site on my mobile device, or just shrink my desktop window. Below is a link to my site along with the co

Solution 1:

DEMO: https://jsbin.com/qufelu/1/

https://jsbin.com/qufelu/1/edit?html,css,output

You were using some incorrect classes, missing tags (on the right aligned stuff), unclosed tag (collapse), and were using an outdated attribute from ancient history ( align="center") Also, you don't need to wrap the name inside a div.

CSS

.custom-navbar {
    background: transparent;
    border: 0px;
}
@media (max-width:767px) { 
    .custom-navbar.name {
        font-size: 20px;
        float: left;
        margin: 0;
        padding: 15px015px15px;
    }
    .custom-navbar.navbar-toggle {
        margin: 10px15px00;
        float: right;
    }
}
@media (min-width:768px) { 
    .custom-navbar.navbar-header {
        width: 100%;
        margin: 0;
    }
    .custom-navbar.name {
        text-align: center;
        float: none;
    }
}

HTML:

<divclass="navbar navbar-default custom-navbar"><divclass="container-fluid"><divclass="navbar-header"><h2class="name">Jovan S Hernandez</h2><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#navbar-collapse"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button></div><divclass="collapse navbar-collapse"id="navbar-collapse"><ulclass="navbar-right nav navbar-nav"><li><ahref="mailto:jovanshernandez@gmail.com"><iclass="fa fa-envelope-o"></i> Email Me</a></li><li><ahref="http://www.twitter.com/jovansn0w"><iclass="fa fa-twitter"></i> Twitter</a></li></ul><ulclass="nav navbar-nav navbar-left"><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">
               Projects <bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">JoCat Creative Media</a></li><li><ahref="#">Gesaffelstein Landing</a></li><li><ahref="#">Monthly  Resolutions</a></li><liclass="divider"></li><li><ahref="#">Home</a></li><liclass="divider"></li></ul></li></ul></div><!-- .navbar-collapse --></div><!-- .container --></div><!-- .navbar -->