Floated element with assigned width

In fact the problem comes from the fact you added a padding of 2em to the aside html tag (line 259). So, put the percentage you need, as exemple 30% for the left column and 70% for the right column.

At this stage, the one that should be on the right will be underneath, why ? Because the 2em padding applied on the aside tag is added to the total percentage, so that's a value over 100%.

A way among another to fix it is to play with the box-sizing property using the universal selector. (you need to prefix it for Firefox).

          *{
            box-sizing: border-box;
            }

At this stage, both are well aligned, but you have a gap between the left div at the top and the header.

The way I solved this is using positionning, not sure that's the best way to solve it, you should have a confirmation.

But basically what I've done is just adding a position: absolute to the aside tag, with top:-5px, and I added as well a relative position to the section tag, which is the parent, this way that's that tag which is taken as reference. As It's the first positionned parent.

aside {
    float: left;
    width: 30%;
    background: rgb(191,231,240);
    padding: 2em;
    position: absolute;
    top: -4px;
}

section{
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

Hope it helps a bit, but you should ask confirmation from more experienced people about the way to fix the gap between the left column and the header, moreover, there is a new css technic layout classroom, that should probably help you to fix that kind of issues.