
Помогите найти ошибку, контент в блоке 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;
}



