if you use this: display: inline-block; your picture will appear in one side of your browser, if you want your picture to be rounded and in the center of your web browser use this:

/* If you are using Google Chrone you will not have the problem that your picture disappear when you use display:block; However if you are using Mozilla FireFox you will need to add to your code clear: both; */

.profile-photo {
display: block;
clear: both;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}

/* CSS clear Property Property Values: both No floating elements allowed on either the left or the right side */

Much cleaner than adding a border, Kyle. Thanks.

I would say this is the proper solution. Floated elements should be cleared when needed. Since the wrapper is what comes immediately after the header it should be the one that clears it.

It also has the benefit of fixing the more general header gap problems that happen in both firefox and chrome (didn't test others) when either the wrapper div, section, or first child of the section has a top margin. The content boxes for all 3 of these elements all begin at the top of the header because it's floated A top margin on any of those elements will produce a gap above the header.

By clearing the wrapper it drops the content box for the wrapper down below the header.

Works like a charm. Thanks for the fix Kyle, and thanks for the explanation Jason. Much appreciated.

Upon further testing, it actually seems to be caused by the float: left; on the header element. In order to fix it on my own site, I removed the float and added it within my first media query for screens at least 480px across. This didn't seem to have any adverse effects on the rest of the pages and resolved the image disappearing issue.

For reference, you can see the fix in action on the about page of my site at: http://phillipjgibson.com/about.html

You can see my whole CSS file at https://github.com/renolc/renolc.github.io/blob/master/css/style.css

The relevant parts are:

header {
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

@media screen and (min-width: 480px) {
    header {
        float: left;
    }
}

If I wasn't clear, my fix also doesn't require you to change the image to inline-block.

HI Phillip Gibson ,

I think this does solve the problem below 480px but you would still have the header gap problem above that. You can assign a top margin to the h3 that you currently have on your about page to see the problem.

See my comment to Kyle McHatton's answer.

Glad to help.

Hi Berry,

The header is floated left in this project. By having the wrapper div clear the float the browser will force it down below the header.