How can i align the heading and the
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="col-md-4"><h1>BestBite</h1> </div>
<ul style="list-style-type:none" class="nav-pills">
<li role="presentation" class="active" ><a href="#">About</a></li>
<li role="presentation" ><a href="#">Sign Up</a></li>
<li role="presentation" ><a href="#">Login</a></li>
</ul>
</div>
<div class="container">
</div>
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="section banner">
<div class="container">
<h3>Always have the answer to "What's for dinner?"</h3>
</div>
</div>
<div class="section">
<div class="container">
<div class="page-header">
<h3>Newest Contributions</h3>
</div>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>
.header{
padding:40px;
}
.header .col-md-4 h1{
top-margin:210px;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Arvo', serif;
font-size: 16px;
}
.container {
max-width: 940px;
margin: 0 auto;
}
/* Header */
.nav-pills li{
margin-top:30px;
color:red;
background-color:rgba(121,25,47,1);
margin-top:30px;
margin-right: 10px;
right:50px;
position:relative;
}
.nav-pills li a {
background-color:white;
box-shadow:0 2px 4px rgba(0,0,0,.5);
color:rgba(216,25,47,1);
padding:15px;
border: 1px red solid;
}
.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
background-color:rgba(216,25,47,1);
box-shadow:0 2px 4px rgba(0,0,0,.5);
color:#fff;
text-decoration:none;
}
.nav-pills li a:hover{
background-color:rgba(216,25,47,1);
}
/* Jumbotron */
.jumbotron {
height: 500px;
}
/* Banner */
.banner, .supporting {
text-align: center;
padding-top: 40px;
}
.banner {
background-color:#36343f;
height:180px;
color: #fff;
}
/* Media Queries */
@media (max-width: 680px) {
.header h1 {
margin-bottom: 50px;
text-align: center;
padding: 10px;
}
.nav {
float: right;
margin: 0 auto;
}
.banner {
height: 220px;
}
.nav-pills li:first-child a {
margin-left: 0;
}
}