Content goes way out of box area

Question

See my codepen: http://codepen.io/Chiz/pen/zBWzZB

I want the UL list to be inside the white area on the left side, but for some reason, when I add the UL, it seems to go way out of the white area.

When I remove the UL tag, though, it looks good.

*
{
  box-sizing:border-box;
}

body
{
background: linear-gradient(to right,  #f4f4f4 0%,#848484 80%);
}

.container
{
  width:100%;
  height:100vh;
  position:relative;
}

.card
{
  width:70%;
  height:500px;
  background-color:rgb(250,250,250);
  padding:0;
  position:absolute;
  top:50%;
  left:0;
  right:0;
  margin:0 auto;
  transform:translateY(-50%);
}

.card .left
{
  width:70%;
  height:100%;
  background-color:rgb(250,250,250);
  display:inline-block;
  padding:0;
  margin:0;
}

.card .left .leftcontentbox
{
  width:75%;
  height:90%;
  border:1px solid red;
  margin:0 auto;
}

.card .left .leftcontentbox .topnav
{
  width:100%;
  border:1px solid black;
}

.topnav ul li
{
  display:inline-block;
}

.card .right
{
  width:29.55%;
  height:100%;
  background-color:#b6e6f2;
  display:inline-block;
  padding:0;
  margin:0;
}

<div class="container">
  <div class="card">
    <div class="left">
      <div class="leftcontentbox">
        <div class="topnav">
          <img src=""></src>
          <ul>
            <li>Articles</li>
            <li>About</li>
            <li>Contact</li>
          </ul>
        </div>

        <div class="headertext">

        </div>

        <div class="latestarticles">

        </div>

      </div>
    </div>


    <div class="right">
    </div>
  </div>
</div>

Answer 1

Changing display:inline-block to float:left at .card .left and float:right at .card .right.

Since we have used float on .left and .right. We need to reset the float by adding .fixit class to parent class(.card) of .left and .right

Note: .fixit class code is also included in the CSS

 .fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}

*
{
  box-sizing:border-box;
}

   .fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}

body
{
background: linear-gradient(to right,  #f4f4f4 0%,#848484 80%);
}

.container
{
  width:100%;
  height:100vh;
  position:relative;
}

.card
{
  width:70%;
  height:500px;
  background-color:rgb(250,250,250);
  padding:0;
  position:absolute;
  top:50%;
  left:0;
  right:0;
  margin:0 auto;
  transform:translateY(-50%);
}

.card .left
{
  width:70%;
  height:100%;
  background-color:rgb(250,250,250);
  float:left;
  padding:0;
  margin:0;
}

.card .left .leftcontentbox
{
  width:75%;
  height:90%;
  border:1px solid red;
  margin:0 auto;
}

.card .left .leftcontentbox .topnav
{
  width:100%;
  border:1px solid black;
}

.topnav ul li
{
  display:inline-block;
}

.card .right
{
  width:29.55%;
  height:100%;
  background-color:#b6e6f2;
  float:right;
  padding:0;
  margin:0;
}

<div class="container">
  <div class="card fixit">
    <div class="left">
      <div class="leftcontentbox">
        <div class="topnav">
          <img src=""></src>
          <ul>
            <li>Articles</li>
            <li>About</li>
            <li>Contact</li>
          </ul>
        </div>

        <div class="headertext">

        </div>

        <div class="latestarticles">

        </div>

      </div>
    </div>


    <div class="right">
    </div>
  </div>
</div>

Answer 2

Add a float left to your left card class and a float right to your right card class, here's what i did :

{
  box-sizing:border-box;
}

body
{
background: linear-gradient(to right,  #f4f4f4 0%,#848484 80%);
}

.container
{
  width:100%;
  height:100vh;
  position:relative;
}

.card
{
  width:70%;
  height:500px;
  background-color:rgb(250,250,250);
  padding:0;
  position:absolute;
  top:50%;
  left:0;
  right:0;
  margin:0 auto;
  transform:translateY(-50%);
}

.card .left
{
  width:70%;
  height:100%;
  background-color:rgb(250,250,250);
  display:inline-block;
  padding:0;
  margin:0;
  float: left;
}

.card .left .leftcontentbox
{
  width:75%;
  height:90%;
  border:1px solid red;
  margin:0 auto;
}

.card .left .leftcontentbox .topnav
{
  width:100%;
  border:1px solid black;
}

.topnav ul li
{
  display:inline-block;
}

.card .right
{
  width:29.55%;
  height:100%;
  background-color:#b6e6f2;
  display:inline-block;
  padding:0;
  margin:0;
  float : right;
}