Centering container in CSS, after deleting a 4th box - html

Question

I have deleted a 4th box as i only need 3 and want the centre the 3 boxes. Here is an image. This is my CSS Code. Below is the HTML code, Keeps saying there is too much code so I am filling up this part with more text so hopefully I can get some help at some point, hopefully this is enough text to code now ?
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
#featured h2 {
text-align: center;
}
#featured .icon {
position: relative;
display: block;
background: #2A70E8;
margin: 0px auto 20px auto;
line-height: 2.5em;
font-size: 4em;
text-align: center;
color: #FFF;
}
.column1,
.column2,
.column3,
.column4 {
width: 282px;
}
.column1,
.column2 {
float: left;
margin-right: 24px;
}
.column3 {
float: left;
}
.column4 {
float: right;
}
<div id="featured-wrapper">
<div id="featured" class="container">
<div class="major">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
</div>
<div class="column1">
<span class="icon icon-bar-chart"></span>
<div class="title">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column2">
<span class="icon icon-qrcode"></span>
<div class="title">
<h2>Praesent scelerisque</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column3">
<span class="icon icon-building"></span>
<div class="title">
<h2>Fusce ultrices fringilla</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
</div>
</div>

Answer 1

we need to see your HTML to give You a correct Answer
but try this
replace this code
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
with this
#featured-wrapper {
width:900px;
margin:0 auto;
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
and you can change this number 900
with the best width for the HTML

Answer 2

Try wrapping the 3 columns in a div with a columnwrap class like:
.columnwrap {
width: 846px; //width of your 3 columns combined, add px for padding if needed
margin: auto;
}
then:
<div class="columnwrap">
<div class="column1"></div>
<div class="column1"></div>
<div class="column1"></div>
</div>
You are going to need to clearfix the three floats before the closing div tag on the columnwrap. This should do the trick.

Answer 3

you can avoid float and use .column {display:inline-block} + .parent .column {text-align:center}.
Snippet to test below
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
text-align:center;/* new */
}
#featured h2 {/* cleaned up */
}
#featured .icon {
position: relative;
display: block;
background: #2A70E8;
margin: 0px auto 20px auto;
line-height: 2.5em;
font-size: 4em;
text-align: center;
color: #FFF;
}
.column1,
.column2,
.column3,
.column4 {
width: 282px;
display:inline-block;/* new instead float*/
margin:0 10px;/* update*/
}
.column1,
.column2 {/* cleaned up */
}
.column3 {/* cleaned up */
}
.column4 {/* cleaned up */
}
<div id="featured-wrapper">
<div id="featured" class="container">
<div class="major">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
</div>
<div class="column1">
<span class="icon icon-bar-chart"></span>
<div class="title">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column2">
<span class="icon icon-qrcode"></span>
<div class="title">
<h2>Praesent scelerisque</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column3">
<span class="icon icon-building"></span>
<div class="title">
<h2>Fusce ultrices fringilla</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
</div>
</div>