<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i,800,800i&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://e-aydin.com/files/mozaik/css/mozaik.min.css">

<div id="body">
  <div class="sira container sari">
    <div class="sira">
        <div class="sutun-4">
          .sutun-4
        </div>
        <div class="sutun-3">
          .sutun-3
        </div>
        <div class="sutun-3">
          .sutun-3
        </div>
    </div>
    <div class="sira" style="margin-top:15px;">
        <div class="sutun-4">
          .sutun-4
        </div>
        <div class="sutun-3 esit-1">
          .sutun-3 .esit-1
        </div>
        <div class="sutun-3 esit-1">
          .sutun-3 .esit-1
        </div>
    </div>
  </div>
</div>
body{margin:0; padding:0;background: #e1dbbb;}
#body{
    color:#555;
    padding:50px;
    font-family: 'Lato', arial;
    font-size:16px;
  }
  .container{
    width:600px !important;
  }
.sari{
  background:#c2b98a;
  padding:10px;
  border-radius:5px;
  border:3px solid #b5ac7c;
}
  [class*='sutun-'] {
  	overflow-x: hidden;
    text-align: center;
  	color: #fff;
    border:3px solid #e1dbbb;
  	border-radius: 5px;
    background: #000;
    font-size:11px;
  	font-weight: 600;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.