I am making a new web page as an exercise to learn HTML5. Unfortunately, I have encountered a very frustrating problem.

My page has a "topbar" header element that contains one "h1" element (page title) and two "nav" elements. I want the "h1" element to appear on the left side of the "topbar." I want the "nav" elements to appear on the right side of the "topbar."

Nav element "nav\_secondary" contains two links, "Register" and "Sign in". This should appear at the top right corner of the "topbar." Below "nav\_secondary" should appear the "nav\_main" element containing a row of navigation links.

Unfortunately, my site looks all wrong. The nav elements are all the way on the left side of the topbar and are pushed off the screen. I have spent hours changing the CSS around and Googling tutorials but have yet to find a solution.

Here is a screenshot of the top half of my page:
[top half of page displaying incorrectly](http://i.stack.imgur.com/dTUIB.png)

Here is a mock-up image of what I want it to look like:
[top half of page displaying correctly mockup](http://i.stack.imgur.com/kOK89.png)

Here is my HTML code:

```
    <!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>Site Name - Page Title</title>
                    <link rel="stylesheet" type="text/css" href="css/styles.css">
            </head>

            <body>
                    <div class="fullscreen-bg"></div>
                    <header class="topbar">
                            <h1>Page Title</h1>
                            <nav class="nav_secondary">
                                    <a href="register.html">Register</a>
                                    <a href="signin.html">Sign in</a>
                            </nav>
                            <nav class="nav_main">
                                    <a href="home">Home</a>
                                    <a href="archive">Archive</a>
                                    <a href="about">About</a>
                                    <a href="contact">Contact</a>
                            </nav>
                    </header>

                    <section class="bodycontainer">
                            <article class="articlecontainer">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
                            </article>
                            <article class="articlecontainer">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
                            </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                <article class="articlecontainer">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
    e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
    erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
     sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
    obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
    am varius augue placerat dapibus lobortis. </p>
                </article>
                    </section>
            </body>
    </html>

```

Here is my CSS:

```
    html {
            height:100%;
    }

    body {
            background: #000000;
            color: #ffffff;
            font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: 500;
            line-height: 20px;
    }

    h1 {
            font-size: 24px;
    }

    .fullscreen-bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100;
            background-attachment: scroll;
    }

    @media (min-width: 767px) {
            .fullscreen-bg {
                    background: url('../img/background.jpg') center center / cover no-repeat;
            }
    }

    .topbar {
            background: #000000;
            position: fixed;
            display: block;
            top: 0;
            left: 0;
            right: 0;
            padding-left:50px;
            border: none;
            width: 100%;
            height: 100px;
            margin: none;
            z-index: 999;
            overflow: auto;
            background: rgba(0, 0, 0, 0.85);
    }

    .topbar h1 {
            float: left;
    }

    .nav_main {
            float: right;
            display: block;
            margin-top: none;
            margin-right: 50px;
            margin-bottom: none;
            margin-left: none;
            padding-top: 0px;
            padding-right: 50px;
            padding-bottom: 0px;
            padding-left: 0px;
            font-size: 24px;
            width: 100%;
            height: 50px;
            clear: both;
            overflow: auto;
    }

    .nav_main a:link {
            color: #ffffff;

    }

    .nav_main a:visited {
            color: #ffffff;
    }

    .nav_main a:hover {
            color: #C18E15;
    }

    .nav_secondary {
            position: relative;
            float: right;
            display: block;
            margin-top: 10px;
            margin-right: 50px;
            margin-bottom: none;
            margin-left: none;
            padding-top: 0px;
            padding-right: 50px;
            padding-bottom: 0px;
            padding-left: 0px;
            font-size: 14px;
            width: 100%;
            height: 50px;
            clear: both;
            overflow: auto;
    }

    .nav_secondary a:link {
            color: #ffffff;
    }

    .nav_secondary a:visited {
            color: #ffffff;
    }

    .nav_secondary a:hover {
            color: #C18E15;
    }

    .bodycontainer {
            padding-top: 100px;
            padding-left: 25px;
            padding-right: 0px;
            padding-bottom: 0px;
            display: block;
            overflow: hidden;
            margin: none;
    }

    .articlecontainer {
            background: #000000;
            padding-top: 0px;
            padding-left: 25px;
            padding-right: 25px;
            padding-bottom: 0px;
            display: block;
            overflow: hidden;
            float: left;
            margin: 10px;
            width: 300px;
            height: 300px;
            background: rgba(0, 0, 0, 0.85);
    }

```

Does anyone know how I can fix this so it appears the way it should as illustrated in my mock-up? Please let me know.

Thanks!