Помогите найти ошибку, контент в блоке options слева съезжает под slider. Помогите найти ошибку!

<section class="container type">
<div class="slider">
<input type="radio" name="radio" id="slide-nav1" checked>
<input type="radio" name="radio" id="slide-nav2">
<input type="radio" name="radio" id="slide-nav3">

        <div class="slide-box">
            <div class="slide test1"><img src=""></div>
            <div class="slide test2"><img src=""></div>
            <div class="slide test3"><img src=""></div>
        </div>

        <label for="slide-nav1"></label>
        <label for="slide-nav2"></label>
        <label for="slide-nav3"></label> 
    </div>
    <div class="options">
        <div class="list">
            <ul>
                <li>1111</li>
                <li>1111</li>
            </ul>
        </div>
    </div>
</section>

CSS:
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;

}
html, body{
width: 100%;
height: 100%;
}
.container{
width: 50%;
margin: auto;
}
.type{
display: table;
background-color: #eee;
}
.slider{
display: table-cell;
width: 70%;
text-align: center;
padding: 0.5em;
}
.options{
display: table-cell;
width: 30%;
}

/* ===== slider ===== */

.slider > input{
display: none;
}
label{
background-color: #fff;
display: inline-block;
padding: 0.5em;
border: 1px solid #ccc;
margin-top: 0.5em;
}

slide-nav1:checked ~ label:nth-of-type(1),

slide-nav2:checked ~ label:nth-of-type(2),

slide-nav3:checked ~ label:nth-of-type(3){

background-color: yellow;

}
.slide-box{
position: relative;
background: #fff;
width: 100%;
height: 200px;
}
.slide{
position: absolute;
opacity:0;
}

slide-nav1:checked ~ .slide-box > .test1,

slide-nav2:checked ~ .slide-box > .test2,

slide-nav3:checked ~ .slide-box > .test3{

opacity:1;
transition:3s;

}

.slider img{
width: 100%;
}

/* ===== options ===== */

.options li{
margin-left: 1.5em;
}