Html5 page structure issue - css

Question

I have creating one web page using html5
Here is my code:
<header>
<img src="img/logo.png" alt="logo">
<hr class="hr-style">
<h1>The Articles</h1>
<nav>
<ul>
<li>Home</li>
<li>Articles</li>
</ul>
</nav>
</header>
<section>
<article class="article">
<img src="img/articles.png" alt="articles" />
</article>
<aside class="aside">
<img src="img/agencies.png" alt="agencies" />
</aside>
</section>
<footer>
</footer>
This is my JSfiddle i tried: please see this what i tried,
http://jsfiddle.net/3jet0dfu/
I need like this:
I'm new to HTML5, i need to know how to align the page using html5 tag.

Answer 1

To start with, you need to contain your content with a width.
Have an example!
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.