Having trouble with CSS layouts and positioning

Having trouble with CSS layouts and positioning
0.0 0

#1

Am practicing positioning and cannot figure out why my margins cause my section to to go down, instead of staying inline with the aside. I have read about the overflow function as well as vertical-align: top, yet both do not seem to work. Give me tips, or correct code. Also, there is no space between the aside and section: < aside>< /aside>< section>< /section>

`header,
aside,
section,
footer {
background-color: skyblue;
border-radius: 6px;
height: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 2px 1px 2px 1px;
}
aside {
width: 30%;
display: inline-block;
vertical-align: top;
overflow: auto;
}
section {
width: 70%;
display: inline-block;
vertical-align: top;
overflow: auto;
}
and codepen : http://codepen.io/Garlicboy/pen/WGoAJy


#2

margin is not counted when computing widths. Your <aside>'s and <section>'s total width already add up to 100%. You can reduce their widths a bit to make room for margins.