elements will not center within a div - html

Question

I have three elements that are coded similarly .infobtnlg, .twitter, .infobtnsm.
The first .infobtnlg is centered nicely within a div .section1 as I want it to be, the second .twitter and third .infobtnsm are not centered within their respective sections. The width is set, the left/right margins are auto. I added text-align: center; for good measure.
What am I missing?
DEMO PLAYGROUND
HTML
<div class="trisection">
<div class="section1">
<button type="button" class="infobtnlg">The May Difference</button>
<button type="button" class="infobtnlg">Parent Reflections</button>
<button type="button" class="infobtnlg">Make a Gift</button>
</div>
<div class="section2">
<div class="twitter">
<img src="/images/twitter-bl.png" alt="twitter"/>Announcements
<hr>
</div>
</div>
<div class="section3">
<button type="button" class="infobtnsm" style="background-color: #003b76;">In the News</button>
<button type="button" class="infobtnsm" style="background-color: #5a9331;">The May Way</button>
<button type="button" class="infobtnsm" style="background-color: #ff0000;">Meet Our Teachers</button>
<button type="button" class="infobtnsm" style="background-color: #ffcc00;">Friends of May</button>
<button type="button" class="infobtnsm" style="background-color: #fb8d20;">The May Center</button>
</div>
</div>
CSS
.section1, .section2, .section3 {
width: 90%;
margin: 0px auto;
height: 255px;
text-align: center;
}
.infobtnlg, .twitter, .infobtnsm {
display: block;
width: 93%;
margin: 6px auto;
border-radius: 10px;
}
.infobtnlg {
font-family: Garamond, Georgia, 'Times New Roman', serif;
font-size: 1.5em;
background-color: #5a9332;
height: 77px;
text-shadow: -1px -1px 1px #3c3c3c;
box-shadow: -2px 2px 1px #3c3c3c;
}
.twitter {
height: 240px;
background-color: #fff;
background-image: url("/images/twfeed.png");
background-size: contain;
color: #5a9332;
font-size: 18px;
vertical-align: middle;
font-weight: bold;
border: solid 1px #e2dce0;
}
.infobtnsm{
font-family: Scala, Myriadbold, sans-serif;
font-size: 18px;
text-align: center;
height: 40px;
margin-bottom: 5px;
}

Answer 1

Add float: none; to .twitter and .infobtnsm or remove float: left; from
.vista .ie8 .infobtnlg, .twitter, .infobtnsm {
float: left;
width: 30%;
}

Answer 2

text-align will help you centering text inside those div
//to center contents inside div you shoul use:
#div {
margin:auto;
}
OR
you may simply choose to use bootstrap div columns which will do all your things very easy these contents will be fully responsive
//html
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 section1">
//section1 contents
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 twitter">
//twitter contents
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 infobtnsm">
//infobtnsm contents
</div>
</div>
</div>
</div>