Adding an item to the first column causes the second column to go down

I have two columns displayed in inline-block, side by side inside the main shell. When I add an item to one column, the second column will advance further. I would like to know what is causing this behavior so that I can understand the css better. I added the ul to the primary column and the second column in the right column rolls down to show 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, 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;
        }