Theres a few things wrong here.
- The property
box-sizing: border-box should be on every element (for your own sanity). You can add this to the very top:
font-family: 'Open Sans', sans-serif;
- Adding margin left/right to
#main will make the element larger in width, which is why you’re getting a horizontal scrollbar. To avoid this, it’s good practice to do the following. You’ll use this technique a lot in future.
margin: 4em auto 4em auto; // top/bottom = 4em, left/right = auto (this will center the element)