Check out my codepen: http://codepen.io/Chiz/pen/zBWzZB
I am trying to position the UL list inside the white area on the left side, but for some reason, it keeps extending beyond the boundaries of the white area.
However, when I remove the UL tag, everything looks fine.
* {
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>