I made a header with a nav inside of it and set the width to 100%. I kept it out of the container so only the header can take the entire page and the other content will be 960px. Now my site title and nav are too much to the left and i tried to center it and match the 960px container with margin:0 auto but that didn't work. How can i get my site title to match right where the 960px container starts and the nav as well? I want to space the nav more to the right.

jsfiddle - <http://jsfiddle.net/wphkyhw8/>

```
<!DOCTYPE html>

<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>

<body>

<header class="main_header">
<p class="main_title">Rafael Caba</p>
    <nav class="main_nav">
        <ul>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<div class="container">

<section class="main_content">
    <article>
        first article
        first article
        first article
        first article
        first article
        first article
    </article>
</section>

<footer>
    copyright 2014
</footer>

</div> <!-- end of container -->

</body>
</html>

*{
    margin:0;
    padding:0;
    list-style-type:none;
}

header,nav,section,article,aside,footer{
    display:block;
}

.container{
    width:960px;
    border:1px solid black;
    margin:0 auto;
}

.main_title{
    float:left;
    padding:20px;
    font-size:25px;
}

.main_header{
    background-color:#000000;
    color:#ffffff;
    width:100%;
    height:80px;
}

.main_nav{
    float:left;

}

.main_nav ul li{
    float:left;
    padding:30px 10px;
}

.main_nav ul li a{
    text-decoration:none;
    color:#ffffff;
}

```