Why index-content takes full width of parent (.container)?

Good day.
Not installed MAIN class .container that specifies a fixed width.
Inside .container has a child block with a class advantage, it occupies the whole width of the parent, and below there are blocks with the class .index-content, and for some reason they don't take up the whole width of the parent.
Want to achieve the effect below .index-the content spans the entire width of the parent, and the blocks inside it - index-content-left was pressed to the left, and index-content-right to the right, and the remaining space would be the distance between the blocks. But now they just stick together and not take the whole width of the parent.
Interested in more – why is this behavior, not how to fix it.
https://jsfiddle.net/q4aoz3kc/
July 2nd 19 at 17:12
1 answer
July 2nd 19 at 17:14
Solution
You have not correctly installed .clearfix. You forgot about the fact that display:table and content must be applied to pseudomomentum, and not to the item. In the end, you install the wrong display to the container that you want to stretch, and he is expected to behave differently than block elements (in particular, the default table does not extend over all possible width).
.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
}
.clearfix:after {
clear:both;
}
Thank you so much. Like a trifle, but already 2 hours scratching their head why so ))) - Kelvin.Yost0 commented on July 2nd 19 at 17:17

Find more questions by tags CSSHTML