I'm attempting to arrange 3 Wells horizontally in one row, as shown below
<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>Here goes some text that might be a bit lengthy, but I don't think it will exceed the well size.</p>
</div>
<div class="span4 well">
<h3 class="centralizado"><img src="/assets/educacao.png" />
<a href="<%= educacionais_path %>" class="no-style">Educational</a>
</h3>
<p>Here goes some text that might be a bit lengthy, but I don't think it will exceed the well size.</p>
</div>
<div class="span4 well">
<h3 class="centralizado"><img src="/assets/contato.png" />
<a href="/contact" class="no-style">Contact</a>
</h3>
<p>Here goes some text that might be a bit lengthy, but I don't think it will exceed the well size.</p>
</div>
</div>
However, the outcome is not as expected: https://i.stack.imgur.com/ha5Dq.png
The goal is to have all 3 Wells aligned in the same row. It's important to note that I am utilizing container, and not container-fluid.
Below is the customized CSS being used:
.well{
background-color: white !important;
}
* {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}