I need assistance with aligning a row of columns, each containing a button, to the center 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>
In order to achieve this layout adjustment using CSS, I attempted applying padding-left:
.row {
padding-left:300px;
}
While this shifted the content, it also affected the spacing between buttons. Any guidance on how to properly position these elements would be highly appreciated.