#topsection {
background: lightblue;
content: '';
display: block;
height: 55px;
margin-top: 0px;
text-align: center;
width: 100%;
padding: 0;
float: left;
clear: both;
}
Widać tu kilka problemów.
Własność content określa, co jest wyświetlane wewnątrz pseudoelementów :before i :after. Więc w tym przypadku nie ma zastosowania.
clear: both; powinien być elementem bezpośrednio występującym po float: left; Istnieje technika czyszczenia floata zwana clearfix
#container4 {
text-align: center;
display: none;
width: 100%;
height: 52px;
float: left;
z-index: 100;
background: #ddd;
}
z-index: 100; nie działa na elementy z pozycją statyczną
Zapoznaj się z flexbox i przepisz te style. Będzie dużo czytelniej.
<div id="container4">
<div class="menusquare">Mobilka Lewa 22 PL</div>
<div class="menusquare">pusty-L</div>
<button id="toggle" class="menusquare">Swith 2 lang.</button>
<div class="menusquare">pusty-P</div>
<div class="menusquare">Mobilka Prawa 22 PL</div>
</div>
#container4 {
background: #ddd;
display: flex;
justify-content: center;
}
.menusquare {
margin: 1px;
width: 17%;
text-align: center;
border: 1px solid gray;
background: yellow;
display: flex;
align-items: center;
justify-content: center;
}
button.menusquare {
background: pink;
}
Wydaje się, że to button powoduje psucie układu. Dodatkowo ograniczenie wysokości kontenera wypycha go na zewnątrz.