Wells are exceeding the row

Question

I'm trying to put 3 Wells in one row, like this

<div class="row" style="margin-top: 10px">

    <div class="span4 well">
        <h3 class="centralizado"><img src="/assets/temple.png" />
            <a href="<%= ministerios_path %>" class="no-style">Ministérios</a>
        </h3>
        <p>Aqui vai um texto meio longo, mas eu acho que nao vai ultrapassar o well</p>
    </div>

    <div class="span4 well">
        <h3 class="centralizado"><img src="/assets/educacao.png" />
            <a href="<%= educacionais_path %>" class="no-style">Educaional</a>
        </h3>
        <p>Aqui vai um texto meio longo, mas eu acho que nao vai ultrapassar o well</p>
    </div>

    <div class="span4 well">
        <h3 class="centralizado"><img src="/assets/contato.png" />
            <a href="/contato" class="no-style">Contato</a>
        </h3>
        <p>Aqui vai um texto meio longo, mas eu acho que nao vai ultrapassar o well</p>
    </div>

</div>

But this is the output:

The 3 Wells should be in the same row. I'm using container, not container-fluid.

This is the customized css:

.well{
    background-color: white !important;
}

* {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

Answer 1

This happens because the Well style adds extra padding and margins which are not taken into account by the spans. Here's a working jsFiddle.

The easiest solution is to add box-sizing model:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Here's good info on the box-sizing model.

---

Edit: Tested in Firefox, Chrome, IE 8, 9 and 10