Materialize framework margin between columns

Question

Materialize framework comes with strange layout (at least for me). I can't find any margin between columns. This is my code:

<div class="container">
<div class="row">
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos     
  </div>
</div> 
</div>

And this is how it is look in browser.

There are no margins between the columns!

Answer 1

I suggest you use a separate element inside a column, for example, .col-content:

JSFiddle

body {
    color: white;
}

.blue {
    background: blue;
}

.black {
    background: black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col s4">
            <div class="col-content blue">kerlos</div>
        </div>
        <div class="col s4">
            <div class="col-content black">kerlos</div> 
        </div>
        <div class="col s4">
            <div class="col-content blue">kerlos</div>
        </div>
    </div> 
</div>