Nov 20, 2022

# Solution 1 :

3 * (30% + 5%) equals 105% (= wider than 100%), that’s the reason. Change the margin value to 3% and it will work (3* (30% + 3%) = 99%).

``````.clearfix::after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

.common-block {
background-color: wheat;
width: 800px;
height: 400px;
}

.items {
background-color: white;
max-width: 600px;
margin:auto;
overflow: auto;
}

.item {
float: left;
width: 30%;
margin-left: 3%;
border-bottom: 1px solid black;
height: 50px;
}

.item-1 {
background-color: yellow;
}

.item-2 {
background-color: green;
}

.item-3 {
background-color: red;
}``````
``````<div class="common-block">
<div class="items">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
</div>``````

As an alternative, you could apply the left margin only to the second and third block and leave it at 5%. This will also keep the blocks centered inside their container:

``````.clearfix::after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

.common-block {
background-color: wheat;
width: 800px;
height: 400px;
}

.items {
background-color: white;
max-width: 600px;
margin: auto;
overflow: auto;
}

.item {
float: left;
width: 30%;
border-bottom: 1px solid black;
height: 50px;
}

.item-1 {
background-color: yellow;
}

.item-2 {
background-color: green;
}

.item-3 {
background-color: red;
}

.item-2,
.item-3 {
margin-left: 5%;
}``````
``````<div class="common-block">
<div class="items">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
</div>``````

# Problem :

I do not understand why and how to fix a fact that the red block is going to the next line. Ofc i can use `margin-left: 5%` to the 2nd and 3rd block to fix it but that’s not right. So how to spread all three blocks in one line and make their total width with margins equal 100%?

``````.clearfix::after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

.common-block {
background-color: wheat;
width: 800px;
height: 400px;
}

.items {
background-color: white;
max-width: 600px;
margin:auto;
overflow: auto;
}

.item {
float: left;
width: 30%;
margin-left: 5%;
border-bottom: 1px solid black;
height: 50px;
}

.item-1 {
background-color: yellow;
}

.item-2 {
background-color: green;
}

.item-3 {
background-color: red;
}``````
``````<div class="common-block">
<div class="items">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
</div>``````

### Comment posted by Mikita Kazlouski

But if use it like you said those blocks will be no in the middle of white container cos yellow block will have 3.3% margin

### Comment posted by Johannes

I just added a second version that deals with this