I'm attempting to center a Bootstrap Well labeled "Resource Booker" within a div to align properly with the two boxes below it. I've experimented with adding padding, but it ends up adding padding within the well itself. Below is a picture of the page and the corresponding code:
Page Screenshot
https://i.sstatic.net/7Hwkh.png
<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 code for the cards underneath the well is as follows:
/* 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;