Where is the sidebar in this pen? - html

Question

How can you fix sidebar issue here:
http://codepen.io/chriscoyier/pen/ClGcF
body {
padding: 30px;
}
header {
background: lightblue;
}
section {
background: lightgreen;
width: 75%;
float: left;
}
article {
background: white;
margin: 0 0 1rem 0;
}
aside {
background: pink;
width: 25%;
float: right;
}
header,
article,
section,
.module {
padding: 1rem;
}
<main>
<header>
<h1>Site</h1>
</header>
<section>
<article>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
</article>
<article>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
</article>
</section>
<aside>
<div class="module">
<h3>Module</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio rem ab delectus fugit repellendus perspiciatis dolor consequuntur tenetur voluptatem a vitae odit aspernatur? Voluptas quisquam corporis nostrum aspernatur aliquid harum saepe ab pariatur
veniam iste ipsam alias nemo voluptatibus doloribus.</p>
</div>
</aside>
</main>
The goal is to have the sidebar move back to the top.
My confusion:
Where is the sidebar there inside the pen?

Answer 1

<aside> is the sidebar part.
In your css:
*,*:after,*:before { box-sizing: border-box; }
You can read about box-sizing following this link: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

The problem is that you are telling the program to take up 100% of the pagewidth. If you reduce the two widths to 70% and 20-25%, the sidebar will float right, adjacent to the main content body.