html - Cannot center a row -


enter image description herei 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;   } } 

enter image description here

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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -