h2 overspill & displaying sections in center of a container

Just to get some clarification:

On your first problem, do you mean the green color surrounding your h1 text, or are you planning to set a background color for the h2 as well? In either case, something like this:

.container-products section h2 {
  display: inline;
}

.container-products section h2:before {
  content: "";
  display: block;
  cear: both;
}

might get you in the ballpark. Just note that if it is the H1 you want, you will obviously need to change the h2 selectors to h1. Also, the "dispaly; inline;" can be added to your current ".container-products section h2" statement; no need to make another, I just posted it this way for clarity.

On your second problem, have a look at this. I'm just guessing, but I believe you are looking for functionality similar to that. Hope that helps.

Edit: use Tom Bedford's answer. It's cleaner.

Tom Bedford Aaron Graham Thanks both!

Tom Bedford Aaron Graham Just one further question. If you look at the code again the <li> where it says "Inc Carbon, Stainless, Nickel Alloys & Copper Alloys" how do I target that specific list item and reduce the width so that it looks better visually.

You certainly have some options for selecting that one list item, but have you considered just setting a width for your .container-products sections? It would probably keep your layout more uniform.