[Solved] Html5 page structure issue

Question

To start with, you need to contain your content with a width.

In this example I am giving the body a width the same as your logo image (939px). margin: 0 auto; will center the page. Your question is too broad to give you an exact solution.

body{
    margin: 0 auto;
    font-family: Raleway, sans-serif;
    width: 939px;
}

It would be better to replace the <hr> with a border. For example:

<img src="" alt="" id="logo">

#logo {
    border-bottom: solid 2px #CCC;
    padding-bottom: 50px;
}

I have also done a crude CSS reset to remove the default margins; they can then be easily controlled by adding them back to each element. You can also use a CSS Reset or CSS Normalise (do some research on the ideal solution for you)

* {
    margin: 0;
    padding: 0;
}

box-sizing: border-box is also brilliant if you want to use percentages.

Here is an excellent run-down on box-sizing.

* {
    box-sizing: border-box;
}

This simple change gives you most of your desired layout. Now you need to change the width and add margins / padding as needed.

Accepted Answer