Question

My container is span4 and I placed padding/border on it. Everything is fine but inputs are out of bound since they have span4 class as well. I’m providing my HTML, CSS as well as image that displays the problem.

How can I make sure that inputs are maxed out in width but not out of bounds?

<div class="span4 newsletter">
    <h3>Newsletter</h3>
    <input type="text" name="name" placeholder="Name" class="span4" />
    <input type="text" name="surname" placeholder="Surname" class="span4" />
    <input type="text" name="email" placeholder="Email" class="span4" />
    <button type="submit" class="btn btn-inverse pull-right"><i class="icon-envelope icon-white"></i>Subscribe</button>
</div>

.newsletter {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: white;
}

Answer 1

Try using the class “input-block-level” instead of “span4” on the inputs.