Reputation: 715

Centering div box not working

I am trying to center a div element in to a container so that the margin is the same throughout my page but my way of centering does not seem to be working. I am using bootstrap and my own custom css page.

Here is the basic html template:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

    <body>
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li>ONE</li>
                    <li>TWO</li>
                </ul>

                <ul class="pull-right">
                    <li>LOG IN</li>
                    <li>HELP</li>
                </ul>
            </div> <!--End nav container-->
        </div> <!--End nav-->

        <div class="container">
            <h1>header</h1>
            <p> This is a page about me</p>
        </div>

    </body>
</html>

and here is the main.css page I have linked to it:

.nav li {
    display: inline; 
    color: #5a5a5a;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.container  {
    margin: 0 auto; 
}

I've looked at various answers here on stack and online but none seem to work. I also tried using