Bootstrap 3 Кнопка с Margin больше не работает

Question

The fiddle for demo

не может понять, почему эта кнопка не пролонгировать или интерактивный, когда я добавить маржу к верху и влево. Если я выберу класс в строке 47 css, он работает по мере необходимости, но пытается выровнять его с текстом в другом столбце и перестанет работать.

EDIT: кнопка работает, когда экран сжат, просто не в ширине рабочего стола.

Использование последнего Bootstrap, jQuery.

Любые мысли?

CSS

@charset "UTF-8"; 
/* CSS Document */ 
body { font-family: 'Quicksand', sans-serif; } 
    a:link { text-decoration:none; color:rgba(0,0,0,1.00); } 
    a:visited { text-decoration:none; color:rgba(0,0,0,1.00); } 
    a:hover { text-decoration:none; color:rgba(0,0,0,1.00); } 
    a:active { text-decoration:none; color:rgba(0,0,0,1.00); } 

    .buttonsSub { font-size:20px; text-align:center; padding:5px; } 
    h1 { font-family: 'Josefin Sans', sans-serif; font-weight:400; } 

    .col-centered{ 
    float: none; 
    margin: 0 3%; 
    padding-left:-20px; 
} 

    .subTitle {font-size:30px; font-weight:400; } 

    .border { 
    display: inline-block; 
    position: relative; 
} 
.border::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    box-shadow: inset 0 0 0 0 rgba(255,255,255,.5); 
    transition: box-shadow .1s ease; 
} 
.border:hover::after { 
    box-shadow: inset 0 0 0 10px rgba(255,255,255,.5); 
} 
img { 
    display: block; 
    position: relative; 
} 
.containerText { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

#moveDown {margin-top: 20px;} 

HTML

<div class="container"> 

    <div class="row clearfix text-center"> 
     <div class="col-md-2"> 
     <div id="moveDown"><a href="#" class="btn btn-default" style="width:60px; ">Back</a></div> 

     </div> 
     <div class="col-md-10 column col-centered"> 

     <h1 class="begining">title text</h1> 

     </div> 
     <div class="col-md-2"> 
     </div> 
    </div> 

    <div class="row clearfix"> 
     <div class="col-md-12 column text-center"> 
      <br><span class=" subTitle">Page Title</span> 
     </div> 
    </div> 

    <div class="row clearfix"> 
     <div class="col-md-2"> 
     </div> 
     <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:right"> 
     set one<br> 
     <div class="border"> 
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" alt=""> 
</div> 
     </div> 

     <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:left"> 
     set two<br> 
     <div class="border"> 
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt=""/> 
</div> 
     </div> 
     <div class="col-md-2"> 
     </div> 
    </div> 

    <div class="row clearfix"> 
     <div class="col-md-2"> 
     </div> 
     <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:right"> 
     set three<br> 
     <div class="border"> 
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt=""> 
</div> 
     </div> 

     <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:left"> 
     set four<br> 
     <div class="border"> 
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt=""> 
</div> 
     </div> 
     <div class="col-md-2"> 
     </div> 
    </div> 

    <div class="row clearfix"> 
     <div class="col-md-2"> 
     </div> 
     <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:right"> 
     set five<br> 
     <div class="border"> 
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt=""> 
</div> 
     </div> 

     <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:left"> 

     </div> 
     <div class="col-md-2"> 
     </div> 
    </div> 

<!-- End Content -->  
</div> 

Answer 1

Ваш col-centered класс очень проблематично.

.col-centered{ 
    float: none; 
    margin: 0 3%; 
    padding-left:-20px; 
} 

Вы не можете иметь float:none на том же DIV в качестве столбца в Bootstrap, как она нарушит выравнивание столбцов. Кроме того, у вас не может быть поля на одном и том же div, у которого есть col-*-*, иначе он сломает систему сетки 12-ти столбцов Bootstrap. Если вам нужно, чтобы маржа имела другой div внутри столбца div. Наконец, вы не можете иметь отрицательное дополнение в любом элементе, насколько я знаю, таким образом, значение недопустимого атрибута.

Редактировать: Как указано ниже, просто удалите класс.