elements will not center within a div

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%;
}