How do I make a navbar that is centered be responsive friendly - html

Question

I have achieved in making my navbar somewhat centered however it doesn't seem to be very resoponsive friendly. Also, when I collapse the menu my hamburger menu doesn't appear. Any tips would be great!
.navbar-header {
height: 90px;
}
.navbar li {
display: inline;
padding-top: 20px;
float: center;
text-align: center;
}
.navbar {
background: #003643;
}
.navbar li a, .navbar .navbar-brand {
color: #ABD7DE !important;
font-size: 20px;
font-family: 'Lobster', cursive;
text-aline: center;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #284047 !important;
background-color: #ABD7DE !important;
}
#logo {
max-height:150px;
border: none;
border-radius: 50%;
margin-top: -5px;
margin-left: 15px;
}
#nav .navbar-header{
max-width: 900px;
margin-left: 322px;
margin-right: auto;
}
.jumbotron {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg);
height: 700px;
repeat: none;
font-family: 'Lobster', cursive;
color: black;
margin-bottom: 0px;
text-shadow: 1px 1px black;
}
.button-primary {
background: #B1DBDF;
padding: 20px;
font-size: 20px;
border: none;
border-radius: 20px;
padding-left: 40px;
padding-right: 40px;
margin-top: 20px;
}
<nav class="navbar navbar-fixed-top">
<div id="nav" class="container">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<div class="container">
<div style="margin-top:180px" class="row">
<h1>Welcome to my Portfolio!</h1>
<h3>I'm so glad you stopped by!</h3>
<button class="button-primary">Let's get started!</button>
</div>
</div>
</div>

Answer 1

.navbar-header {
height: 90px;
}
.navbar li {
display: inline;
padding-top: 20px;
float: center;
text-align: center;
}
.navbar {
background: #003643;
}
.navbar li a, .navbar .navbar-brand {
color: #ABD7DE !important;
font-size: 20px;
font-family: 'Lobster', cursive;
text-aline: center;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #284047 !important;
background-color: #ABD7DE !important;
}
#logo {
max-height:150px;
border: none;
border-radius: 50%;
margin-top: -5px;
margin-left: 15px;
}
#nav .navbar-header{
max-width: 900px;
margin-left: 322px;
margin-right: auto;
}
.jumbotron {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/mountain.jpeg);
height: 700px;
repeat: none;
font-family: 'Lobster', cursive;
color: black;
margin-bottom: 0px;
text-shadow: 1px 1px black;
}
.button-primary {
background: #B1DBDF;
padding: 20px;
font-size: 20px;
border: none;
border-radius: 20px;
padding-left: 40px;
padding-right: 40px;
margin-top: 20px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">
<div id="nav" class="container ">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<a class="navbar-brand" href="#"><img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/500602/Portfolio_pic.jpg" alt="Zachary" /></a>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<div class="container">
<div style="margin-top:180px" class="row">
<h1>Welcome to my Portfolio!</h1>
<h3>I'm so glad you stopped by!</h3>
<button class="button-primary">Let's get started!</button>
</div>
</div>
</div>