I can't find the code problem, but my page has extra width. It scrolls side to side to fit in the extra side color.

There's a lot of things that can cause this, and unfortunately each particular problem may require a different fix but I'll try to walk you through the troubleshooting process I take for issues like this:

If there is a horizontal scroll, that probably means that there is one or more html elements that have a width that is greater than the width of your browser's viewport. When this happens, the browser will let the element overflow and add a horizontal scroll so that the whole element can be viewed.

With that assumption, now we can set up two next steps:

1. Find out what element(s) are displaying too wide
2. Figure out what to do with the element's styles to mitigate the issue

So lets start with the first step. How do we figure out which element is too wide? The easiest way is to scroll all the way to the right, and then go from the top of the page all the way down, to see if there is one particular element that is visibly sticking out to the far right.

The problem is that oftentimes the element you're looking for isn't visibly sticking out. This could be because it has a transparent background or because its background color is the same as the surrounding colors, so you can't tell it apart.

If this is the case, I suggest you use your inspector and go through each element until you find the culprit. If you're using Chrome, you can open your inspector by right clicking on an element and selecting "inspect element" or by pressing cmd + shift + i (cmd = cntrl in PC). Once you have your inspector open, you can hover over any element and it will highlight all the space it takes up in blue (it will show you the padding in green and margin in orange). Go through all the main elements until you find the one(s) that are sticking out too far. When you find one that's too large, check if there are any other elements inside of it. You might find that only one of the elements inside is the causer of trouble.

Once you find what element is too large, you can go to step 2--figure out how to change the styles to mitigate the issue.

Unfortunately there is no one-size-fits-all solution to this issue so you'll have to try out different things and see what works for you. I'll just suggest a few approaches and you can decide what works best:

• Set a max-width on that element (if you're using percentages, make sure that the element is inside of an element with position relative for it to work properly).
• Set the overflow css property of the element that contains the element that's too large to "hidden." That will ensure that any element that is too large will get cut off instead of overflowing beyond its containing element.
• Set media queries to ensure that the culprit element either gets readjusted or hidden when the browser viewport gets to a certain width

I hope that helps. Honestly, the browser inspector is your best friend for this kind of problem. I also suggest tinkering with the inspector's CSS pane to find a solution before saving it on your stylesheet because it may take a few back-and-forth tries to get it right.