Text follows div - css

Question

Hello its me again i have a problem... You see i got a div inside another div and that div got text in it.. However when i position my second div to the right in my big div the text gets positioned right aswell... And I am not able to move it back with left:0 it works with left:-250px but that aint a good solution.... how should I achieve this?
#spellista {
background-color: green;
position: absolute;
right: 0;
width: 29%;
height: 100%;
top: 0;
}
#first {
left: 0 !important;
position: absolute;
}
.second {
color: red;
}
.third {
color: blue;
}
#searchBar {
height: 80%;
width: 85%;
background-color: rgba(32, 32, 45, 0.98);
position: fixed;
top: 10%;
left: 0;
z-index: 2;
margin: auto;
top: 0;
right: 0;
bottom: 0;
border-radius: 5px;
z-index: 3;
}
<div id="searchBar">
<div id="spellista">
<ul id='first'>
<li class="second">MOre TEXT</li>
<li class="third">TEXT</li>
</ul>
</div>
</div>

Answer 1

remove duplicate id's
#spellista {
background-color: green;
position: absolute;
right: 0;
width: 29%;
height: 100%;
top: 0;
}
#first {
left: 0 !important;
position: absolute;
}
.second {
color: red;
}
.third {
color: blue;
}
#searchBar {
height: 80%;
width: 85%;
background-color: rgba(32, 32, 45, 0.98);
position: fixed;
top: 10%;
left: 0;
z-index: 2;
margin: auto;
top: 0;
right: 0;
bottom: 0;
border-radius: 5px;
z-index: 3;
}
<div id="searchBar">
<div id="spellista">
<div id="spellista1">
<ul id='first'>
<li class="second">MOre TEXT</li>
<li class="third">TEXT</li>
</ul>
</div
</div>
</div>

Answer 2

Your css code is Ok , Only change Html Code (you have multiple elements with same id) :
Your Code is :
<div id="searchBar">
<div id="spellista">
<div id="spellista">
<ul id='first'>
<li class="second">MOre TEXT</li>
<li class="third">TEXT</li>
</ul>
</div
</div>
</div>
Change To :
<div id="searchBar">
<div id="spellista">
<ul id='first'>
<li class="second">MOre TEXT</li>
<li class="third">TEXT</li>
</ul>
</div>
</div>
Full code:
#spellista{
background-color: green;
position: absolute;
right: 0;
width: 29%;
height: 100%;
top: 0;
}
#first{
left:0 !important;
position:absolute;
}
.second{
color:red;
}
.third{
color:blue;
}
#searchBar{
height:80%;
width:85%;
background-color:rgba(32, 32, 45, 0.98);
position:fixed;
top: 10%;
left: 0;
z-index:2;
margin: auto;
top: 0;
right: 0;
bottom: 0;
border-radius:5px;
z-index:3;
}
<div id ="searchBar">
<div id = "spellista">
<ul id = 'first'>
<li class = "second">MOre TEXT</li>
<li class = "third">TEXT</li>
</ul>
</div>
</div>