I am currently in the process of grasping how this functions.
As an example, I have created columns and inserted <hr> for visualization purposes.
This is what I have attempted thus far:
I adjusted the row's margin to be -15px on both sides. Columns were given padding of 15px on left and right.
The widths are similar to those used in Bootstrap.
All columns are floated to the left.
However, I am puzzled as to why my layout isn't working properly. When attempting to create 4 columns, only 3 appear with the fourth dropping down below. The widths seem accurate but it's still not displaying correctly. Feeling a bit frustrated.
Edit:
HTML
<div class="row">
<div class="column">
<hr>
</div>
<div class="column">
<hr>
</div>
<div class="column">
<hr>
</div>
</div>
CSS
.row {
margin-left: -15px;
margin-right: -15px:
}
.column {
padding-left: 15px;
padding-right: 15px;
float:left;
width: 33.33333%
}