Bootstrap ignore styles

Question

I had this code, but bootstrap ignore some code of the list_body div like margin-top. Tried using !important, but it doesn't work.

<div id="list_body">
    <input id="list_name" type="text">
    <input id="list_email" type="text">
</div>

CSS

div #list_body
{
    display: inline;
    margin-top: 0.5em;
}

Full div code

<div class="user_list">
    <div id="list_header">TEST
        <a href="#"><h4>*</h4></a>
    </div>
    <div id="list_body">
        <input id="list_name" type="text">
        <input id="list_email" type="text">
    </div>
</div>

Full class and elements code

div .user_list
{
    max-width: 40em;
    max-height: 30em;
    min-height: 10em;
    display: inline-block;
    margin-right: -1em;
    float: right;
    border: none;
}

div .user_list.active
{
    border: 1px solid black;
    border-radius: 3px;
}

div #list_header
{
    background-color: grey;
    height: 2em;
    border: 1px solid black;
    text-align: center;
}

div #list_header.active
{
    border: none;
    border-bottom: 1px solid black;
}

/*Show list*/
div #list_header a>h4
{
    display: inline;
}

div #list_body
{
    display: inline;
    margin-top: 0.5em !important;
}

(Just write it because stackoverflow asked for more details and i don't know what to add)

When change bootstrap.css all works, but not an solution.

Answer 1

It should be display: block instead of display: inline

div #list_body
{
    display: block;
    margin-top: 0.5em;
}

Working Example