CODEWITHSUNDEEP
css
dgPehrson
dgPehrson

Reputation: 71

Content Moves to the right when browser is in full screen (CSS)

I'm working on CountryGardensNursery.co and everything shows up just fine in Firefox. When I cross check in Safari and Chrome in full screen, the content on the pages moves to the right of the page instead of the center.

I have the content in two containers:

<div class="main_container"><div class="page_container"></div></div>

The CSS related to the code is:

.main_container {
    width: 1000px;
    background: transparent;
    margin: 0 auto -30px;
    top: -30px;
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 90;
}

.page_container {
    background: transparent;
    width: 700px;
    position: relative;
    float: left;
    padding: 0px 20px 10px 0px;
    min-height: 500px;
}

I'm coding this site on Wordpress. Is there a line of code or does anyone see any kind of conflict? Any help would be great! Thanks.

Page with conflict: www.countrygardensnursery.co/about/

Upvotes: 0

Views: 210

Answers (1)

Nahydrin
Nahydrin

Reputation: 13517

Your <header> is not containing it's overflow. Use one of the following solutions:

Overflow

header { /* style.css:1481 */
    overflow: hidden;
}

Clearfix - Recommended

header:after { /* style.css:1481 */
    content: '';
    clear: both;
    display: block;
}

Upvotes: 1

Related Questions