Html select is not respecting margin

Question

Here is a quick example:

Fiddle

As you can see in the image above, all the labels, tables are aligned to the margin inside th container(green margin) but the select seems to go over it, i see on css it has 15 padding, but the padding is only for the text inside.

<%--MODULES--%>
        <div class="col-md-6 col-sm-12" id="prueba">
            <div class="row">
                <label class="col-xs-12">Módulos</label>
                <select class="col-xs-12" multiple="multiple" id="cboModulos" name="cboModulos">
                </select>
            </div>
        </div>

Same thing happens with the textbox in the right, but i bet its the same case.

Thanks

Answer 1

You need to add a .container div around your content. The .row class has negative margins to offset column padding which is causing your elements to be misaligned.

When using a grid system, the grid classes should be applied to block level elements only (inputs are inline, not block). I have refactored your code with grid wrappers around the elements.

Updated Fiddle

Answer 2

If the only column you want to show inside a class="row" is a class="col-anything-12" (mind the 12) in most cases you don't actually need either that class="row" or class="col-xs-12".

Other that that don't set the col- class on select element directly. Wrap it inside a div and add the class to that div.