title header on navbar bootstrap

Question

I want make a page with bootstrap and similitar theme based on template of Visual Studio 2010.

I want the title and navbar always on top.

My code is:

    <div class="navbar navbar-default navbar-fixed-top">
    <div class="container" id="banner">
        <div class="container">
            <h1 id="Title">Control de Operaciones y Gestión de Campaña</h1>
        </div>
    </div>
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

the css

#banner {
 background-color: #4b6c9e;   
 width: 100%;
 text-align:left;
 background-size: cover;
 }

#Title {
    color: #ffffff;
    font-variant: small-caps;
    text-transform: none;
    font-weight: bold;
    margin-bottom: 0px;
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

But when I render a content page, the first lines are behind the navbar

How can I do a title and navbar?