Having CSS troubles regarding bootstrap and text/image alignment


Here’s a link to my codepen for the page.

My first concern is that I’d like the text on the lines to be centered vertically. Second, for some reason, the list items are off center a bit. They stick out further to the right than they do to the left. Lastly, I’d like to improve the spacing of the text and images when the screen is at its thinnest (like on a mobile device).

Any insight would be appreciated, thanks!

EDIT: I added some CSS to make the text centered vertically. It works fine on a full screen desktop, but at smaller sizes the spacing gets all messed up again.


Native Lists are always indented.

What you can do is add margin:0px, padding:0px on your ul tags. That will fix the off-centered look. (I just tried it on your pen)

Check out media-queries, where you can explicitly specify CSS parameters that only take effect on certain browser widths.


Wow, that margin and padding trick really took care of it! Well, I definitely learned something today. That alone pretty much fixes the spacing issue I had as well. Thanks so much for your help!