Having trouble with CSS layouts and positioning

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

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.

1 Like