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: 15px 0 15px 15px;
    }
    .custom-navbar .navbar-toggle {
        margin: 10px 15px 0 0;
        float: right;
    }
}
@media (min-width:768px) { 
    .custom-navbar .navbar-header {
        width: 100%;
        margin: 0;
    }
    .custom-navbar .name {
        text-align: center;
        float: none;
    }
}

HTML:

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