3 Bloki (divy) nie mieszczą się w poziomie HTML

Question

<main>
<div class="calosc">
<div class="lewo"></div>
<div class="srodek"></div>
<div class="prawo"></div>
<div id="clear"></div>
</div>

</main>

.calosc
{
	width: 100%;
	margin: 0 auto;
}
.lewo
{
	display: inline-block;
	text-align:justify;
	width: 20%;
	background-color:red;	
	height:1000px;
}
.srodek
{
	display: inline-block;
	width:60%;
	background-color:yellow;
	height:1000px;
}
.prawo
{
	display: inline-block;
	text-align:justify;
	width: 20%;
	background-color:green;	
	height:1000px;
}
#clear{
clear: both;
}

Nie wiem dlaczego 3 bloki div nie mieszczą się obok siebie, html i body ma 100% szerokości i wysokości 

 

Comments

Między elementami z display: inline-block pojawiają się spacje, które wpływają na layout. Możesz je zlikwidować na kilka sposobów. Chyba najprościej dać white-space: nowrap; na elemencie .calosc