I’ve created a tribute site for Jim Henson using CodePen. When I decrease the width of the browser frame down to a mobile size, a horizontal scroll bar appears and the right side of the page gets cut off. What’s the best way to center the content evenly and avoid the scrollbars?
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.
#main{
background-color: green;
padding: 4em;
margin: 4em auto 4em auto; // top/bottom = 4em, left/right = auto (this will center the element)
width: 100%;
max-width: 90%;
}