Bootstrap NavBar not aligned, especially in mobile view - html

Question

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 code. I would love for my name to fit between my projects tap on the left and my e-mail and twitter icons on the right. Thank you for your help and time.
http://jocatcreative.com/
(trying to get past stack socials 2 link limit...
imugr dot com/0s4iJyr
imgur dot com/vqjiyEd)
(Edited to include screenshots)
<div class="navbar navbar-default">
<div class="container">
<div class="Heading Tag" align="center"><h2>Jovan S Hernandez</h2></div>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Projects <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>JoCat Creative Media</li>
<li>Gesaffelstein Landing</li>
<li>Monthly Resolutions</li>
<li class="divider"></li>
<li>Home</li>
<li class="divider"></li>
</ul>
</li>
</ul>
<ul class="pull-right">
<i class="fa fa-envelope-o"></i> Email Me
<i class="fa fa-twitter"></i> Twitter
</ul>
</div><!-- .container -->
</div><!-- .navbar -->

Answer 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><i class="fa fa-envelope-o"></i> Email Me</li>
<li><i class="fa fa-twitter"></i> Twitter</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>JoCat Creative Media</li>
<li>Gesaffelstein Landing</li>
<li>Monthly Resolutions</li>
<li class="divider"></li>
<li>Home</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
<!-- .navbar-collapse -->
</div>
<!-- .container -->
</div>
<!-- .navbar -->