html - Cannot center a row -
i have 4 columns in row , cannot row centered. it's weird... if @ pic @ bottom, can see row not centered looking @ vertical border under "most read" blue square. html file:
<div class="block-section"> <div class="sm-section-wrapper"> <div class="row"> <div class="sm-preview-title"> read </div> </div> <div class="row"> <div class="col-3"> <div class="sm-preview-wrapper"> <h3 class="preview-sm"> hello world </h3> <h2 class="preview-sm"> vestibulum id ligula porta felis euismod semper. </h2> </div> </div> <div class="col-3"> <div class="sm-preview-wrapper"> <h3 class="preview-sm"> hello world </h3> <h2 class="preview-sm"> vestibulum id ligula porta felis euismod semper. </h2> </div> </div> <div class="col-3"> <div class="sm-preview-wrapper"> <h3 class="preview-sm"> hello world </h3> <h2 class="preview-sm"> vestibulum id ligula porta felis euismod semper. </h2> </div> </div> <div class="col-3"> <div class="sm-preview-wrapper"> <h3 class="preview-sm"> hello world </h3> <h2 class="preview-sm"> vestibulum id ligula porta felis euismod semper. </h2> </div> </div> </div> </div> </div>
and here scss file:
.sm-preview-wrapper{ text-align: center; border-right: 1px solid $light-gray; padding: 0 35px; } .sm-section-wrapper{ @include clearfix(); .col-3{ margin: 0; &:last-child{ .sm-preview-wrapper{ border-right: none; } } } padding-top: 50px; padding-bottom: 36px; .sm-preview-title{ padding-top: 6px; text-align: center; height: 30px; width: 165px; margin: 0 auto; background: $blue; font-family: $montserrat; font-weight: bold; color: white; font-size: 14px; } }
check out fiddle: http://jsfiddle.net/9v98r58s/
you using border .sm-preview-wrapper , not parent .col-sm-3 has padding of 15px.
a solution use :after border
.sm-preview-wrapper:after{ position:absolute; right:-15px; width:1px; top:0; bottom:0; content:''; background:red; }
Comments
Post a Comment