Tribute site - how to avoid scrollbars

Code Feedback
1

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?

https://codepen.io/ksodar/pen/eYOZjzw

Thanks guys!!!

2

main {width: 80%;} seems to be a problem. And then again in the media query remove the width on main.

3

Theres a few things wrong here.

  1. 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;
  box-sizing: border-box;
}
  1. 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%;
}
1 Like
4

This fixed it!! Thanks so much!!