Problem centering display: inline-block

Hi Michael,

I see that you must have looked at the teacher's notes and cleared the float in .profile-photo

The image didn't actually disappear. If you take out the clear you should have a horizontal scrollbar and if you scroll to the right you should see your image stuck at the right side of the header. It'll be in the top right corner of your page. This has to do with the floated header not being cleared.

Clearing the float in the profile image was the solution reached in an earlier post about this same issue.

A new problem has come up recently where people were getting gaps above their header. If the first element that you put in your section has a top margin then it will appear as a gap above the header. Try adding a short paragraph as the very first thing in your section element to see what I mean.

This is related to not clearing that float.

I recommend now that the float be cleared in the wrapper element since that's the first element after the header.

Add clear: both to your existing wrapper rule:

#wrapper {
clear:both;
}

If you do this then you don't have to clear the float in your .profile-photo.

To answer your question about margin auto -

Margin auto only works on block level elements. It doesn't work on inline or inline-block elements. To center those elements you can use text-align: center on the parent element.