How can move a whole row to the right?

Issue

I'm trying to move a row of columns, each containing a button, to the right so that it is positioned on the middle of the page.

<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>

I'm trying to do this in CSS by using padding-left:

.row { 
    padding-left:300px;
}

It does move it but it also changes the distance in between buttons. Any help would be appreciated.

Solution

You're using a grid layout. Applying left padding isn't going to center your columns. It will however further restrict the width of those columns and give them some rather odd positioning. Instead you need to use an offset.

You have 12 columns in total (at least that's the default in Bootstrap) and you're using 6 for your content (3 x 2). You need to offset the first column by 3 to center.

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

Answered By - Nathan Dawson