css in Chrome funktioniert nur nach Element inspizieren

Question

Ich verwende das JQuery-Plugin flexslider, um mehrere Elemente auf meiner Website als Diashow anzuzeigen. Ich verwende auch JQuery .click() Veranstaltung und fadeIn() fadeOut() Auswirkungen auf die Elemente, die flexslider anwenden.

meine Website sieht in Firefox gut aus, aber wenn ich sie in Chrome öffne, sind die Folien in einer Seite gestapelt. aber was mich verwirrt, ist, wenn ich das Element in Chrome inspizieren, es setzt das Layout richtig, genau wie in Firefox.

Kann jemand erklären, was hier passiert?

BEARBEITET: okay nach einigen Inspektion, das Layout ändert, wenn die Breite/Höhe geändert wird, so hier ist die css ich auf das Element verwenden, die nicht richtig angezeigt wird:

#content{
    width: 80%;
    margin: 2% 10%;
    padding: 3% 1%;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 2px 3px 0 #aaa;
       -moz-box-shadow: 0 2px 3px 0 #aaa;
        box-shadow: 0 2px 3px 0 #aaa;
    }
h2{
    width: 80%;
    margin: 5% 10%;
    color: #808080;

    font-family: "Lobster", Arial;
    font-weight: bold;
    font-size: 5em;

    line-height: 1em;
    text-align: center;
}

wird der Flexslider innerhalb von #content und innerhalb der Folien sind Elemente mit h2 tags