The width of an element excludes its margin:
box-sizing - CSS: Cascading Style Sheets | MDN[
^]
You have three elements set to a width of
33.33%, which would completely fill the width of the container. When you add a margin between them, that takes the total width to
100% + 30px, which obviously won't fit on a single line.
One option would be to use
calc to calculate the width of the elements:
calc() - CSS: Cascading Style Sheets | MDN[
^]
.col-lg-4 {
width: calc(33.33% - 10px);
}
A more robust approach would be to use
flexbox - but that's probably not been covered by your course yet.
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[
^]
A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks[
^]
Submit an article or tip