A couple other small issues on the page that I can’t seem to resolve.
How can I get the items aligned to the left with all the other content?
Underneath the h3 of each product listing it should show the price in the code it shows the price class but does not publish it.
If the price has a long name and the text shifts to another line the image section bumps up on that specific image so it does not align with the other products is there a way to resolve this do I need to give the li elements a specific height so it always aligns corrects?
<ul> by default comes with a left padding. We need to remove that, and remove the left padding on the first <li> item so it lines up (otherwise it’ll be slightly off due to the 1% left padding)
I’d actually remove left padding altogether and just use right padding (one or the other) to make it easier; just me though.
Why did you position:absolute .price{}? If it’s supposed to be underneith the h3, then don’t do anything to .price{}. Remove the position:absolute/top/right
You can give vertical-align:top; to the .products li{} and that’ll align the image to the top. That’ll mean that the add to cart button may be slightly off if the longer name needs to wrap. Pick your poison .