Adding an element to the first column pushes the second column down

Question

I have two columns displayed inline block, side by side inside of a main-wrapper. When I add an element to one column, the second column gets pushed further down. I would like to know what causes this behavior so that I can better understand css. I added a ul to the primary column and the secondary column on the right column pushes down to reveal the background color of the main-wrapper.

Here is the HTML:

<div class="main-wrapper">

         <div class="primary-col col">
            <div class="prim-header">
                <div class="logo"><h1>logo</h1></div>
                <div class="nav"><ul>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">Links</a></li>
                </ul></div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam harum, expedita ex a odio voluptas obcaecati unde corporis molestias assumenda in esse reprehenderit, enim inventore labore! Numquam ad doloribus culpa.</p>



         </div>
         <div class="secondary-col col">
            <div class="sec-header">
                <div class="logo"><h1>logo</h1></div>
                <div class="nav"></div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum aliquam, distinctio repudiandae ut asperiores fugit quidem, maxime qui eveniet ex odio. Aut ab itaque, harum laboriosam aspernatur dolor quasi.</p>
         </div>

</div>

And, the CSS:

    * {box-sizing: border-box;}

        body {
            font:normal 1.4em/1.5 sans-serif;
        }

        .main-wrapper {
            width:90%;
            background:red;
            margin: 0 auto;
        }

        .col {
            margin-right:-6px;

        }

        .primary-col {
            width:50%;
            background:#ededed;
            display:inline-block;
            padding:10px;
        }

        .secondary-col {
            width:50%;
            background:#ccc;
            display:inline-block;
            padding:10px;

        }

        .prim-header{
            background:#ccc;
            min-height:100px;
            margin:0 auto;
        }

        .sec-header{
            background:#ebebeb;
            min-height:100px;
            margin:0 auto;
        }


        .nav ul,
        .nav li {
            display:inline-block;
        }

Answer 1

Because inline elements have a default vertical alignment of baseline. You want to set it to top:

.col {
    margin-right:-6px;
    vertical-align:top;
}

jsFiddle example