Eine einfaches Problem zur Flexboxen

Hallo,

ich bin in Sachen html und css ein Grünschnabel...

Ich beschäftige mich mal wieder mit Boxen.
So ich habe jetzt in einem WordPress-Template ein benutzerdefinierter Container eingesetzt:

#container {
width:100%;
height:600px;
background:red;
display:-webkit-flex;
display:flex;
}

#box1 {
background:red;
width:250px;
}

#box2 {
background:yellow;
width:250px;
}

#box3 {
background:green;
width:250px;
}

#box4 {
background:blue;
width:250px;
}

Auf meiner Testseite in html:

<div id="container_1">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
<div id="box4">Box 4</div>
</div>

Sieht so aus: http://hbross.de/?s=flexboxen

Füge ich jetzt aber eine neue zusätzliche Box ein, hier also box5 wird die nicht angezeigt.
Der Code ist:
#box5 {
background:red;
width:250px;
}
und in html
<div id="container_1">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
<div id="box4">Box 4</div>
<div id="box5">Box 5</div>
</div>

Ich stehe vor einem totalen Rätsel.
Was habe ich da bloß übersehen.
Danke für Hilfe.
P.

MrMurphy, vielen Dank für Deine Antwort.
Äh, hm das Problem scheint der Cache vom Firefox gewesen zu sein.
Aber wo habe ich im Code Tippfehler??

Eieiei, das sieht tatsächlich aus wie ein Schreibfehler, war aber beabsichtigt.
Ich habe bei der ursprünglichen Version die "Container" zweimal benutzt.
Und da die ID, meins bescheindenen Wissens nur einmal verwendet werden darf, aber einfach Container_1 und Container_2 usw. daraus gemacht.
Ich hoffe nur, dass ich da nicht wieder falsch gedacht habe