Centering a BootStrap well - html

Question

I am trying to center a Bootstrap Well that says "Resource Booker" within a div so that it aligns properly with the two boxes below it. Ive tried adding padding but it adds padding inside of the well. I provided a picture and my code below.
Page Screenshot
<div class="col-sm-8 text-left">
<br>
<br>
<div class="well well-lg" style="background-color:rgb(0,50,0); color:white;"><h1> Resource Booker </h1> </div>
<br>
<br>
<div class="row">
<div class="column">
<div class="card" id="hi" style="width:400px; height:300px;">
<p><i class="fa fa-user"></i></p>
<h1>Book</h1>
<p>Book A Room</p>
<p> <span class="glyphicon glyphicon-book" style="font-size:150px;"></span></p>
</div>
</div>
<center>
<div class="column">
<br>
</div>
<div class="column">
<div class="card" id="bye" style="width:400px; height:300px;>
<p><i class="fa fa-coffee"></i></p>
<h1>Calender</h1>
<p>Check Availability</p>
<p> <span class="glyphicon glyphicon-calendar" style="font-size:150px;"></span></p>
</div>
</div>
</div>
</div>
</center>
</div>
The CSS for the cards underneath the well is:
/* Float four columns side by side */
.column {
float:left;
width: 27%;
padding: 0px 50px 0px 90px;
}
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 10px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #444;
color: white;
}
.fa {font-size:200px;

Answer 1

Try adding the container class wrapped around the div. You can also add margin-left to the same. Further, please add a codepen of your project so that we mobile users can play around for the solution.

Answer 2

If you add margin-left to div then you have to adjust that margin in media query it's better to give max-width to well dive and give them margin: 0 auto and width: 100%.
Your css will like this
.well{max-width: 400px; width: 100%; margin: 0 auto;}