css - 居中 div 框不起作用

我试图将一个 div 元素置于容器的中心，以便整个页面的边距相同，但我的居中方式似乎不起作用。我正在使用 Bootstrap 和我自己的自定义 CSS 页面。

这是基本的 html 模板:

<!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>

这是我链接到它的 main.css 页面:

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

.container  {
    margin: 0 auto; 
}

我已经在堆栈和网上查看了各种答案，但似乎都没有用。我也尝试使用