Как перемещать целую строку вправо?

Question

Я пытаюсь переместить ряд столбцов, каждый из которых содержит кнопку, вправо, чтобы он располагался в середине страницы.

<div> 
<div class="container-fluid" id="home"> 
    <h1>Welcome to Daniel's Portafolio</h1> 

<div class="row"> 
    <div class="col-md-2"> 
    <a href="https://www.linkedin.com/in/daniel-ramirez-b38203118"> 
    <button class="btn btn-default btn-social-icon btn-xl"><i class="fa fa-linkedin"></i> LinkedIn</button> 
    </a> 
    </div> 
    <div class="col-md-2"> 
    <a href="https://github.com/tadm123"> 
    <button class="btn btn-default btn-social-icon btn-xl"><i class="fa fa-github"></i> Github</button> 
    </a> 
    </div> 
    <div class="col-md-2"> 
    <a href="freecodecamp.com/tadm123"> 
    <button class="btn btn-default btn-social-icon btn-xl"><i class="fa fa-free-code-camp"></i> freeCodeCamp</button> 
    </a> 
    </div> 
    </div> 

Я пытаюсь сделать это в CSS, используя обивка-налево:

.row { 
    padding-left:300px; 
} 

Это движение, но она также изменяет расстояние между ними кнопками. Любая помощь будет оценена по достоинству.

Answer 1

Вы используете схему сетки. Применение левой прокладки не будет центрировать ваши столбцы. Тем не менее, он будет ограничивать ширину этих столбцов и давать им некоторое нечетное позиционирование. Вместо этого вам нужно использовать смещение.

У вас есть всего 12 столбцов (, по крайней мере, это по умолчанию в Bootstrap), и вы используете 6 для своего контента (3 x 2). Вы должны компенсировать первый столбец на 3 до центра.

<div class="row"> 
    <div class="col-md-2 col-md-offset-3">