html css navigator bar blocking the width of image slider - html

Question

I am trying to make a simple website using HTML and CSS as i am beginner-level to programming. The problem is that my image slider is shifting from the right side because of div class="toggle" when i set it to display:block in CSS and when i set its height to 100% it gets fix. i want to know the reason that is causing it..
HTML:
<nav>
<div id="navigator">
<ul class="parent-nav" id="myTopnav">
<li><span>Menu1</span></li>
<li><span>Menu2</span></li>
<li><span>Menu3</span>
<ul class="child-nav">
<li><span>test1</span></li>
<li><span>test2</span></li></ul></li>
<li><span>Menu4</span></li></ul>
<div class="toggle">☰</div>
</div>
</nav>
<section>
<div id="slider">
<div class="slider-container">
<div class="sider-image slid1">
<div class="silder-content">
<h4>Title 1</h4>
<p>test test test test..... </p>
</div>
</div>
<div class="sider-image slid2">
<div class="silder-content">
<h4>Title 2</h4>
<p>test test testtest test.....</p>
</div>
</div>
</div>
</div>
</section>
CSS:
#navigator{
background: url("../image/navbg.gif") repeat-x center ;
background-size: contain;
height: 38px;
padding: 0px;
margin: 0px;
}
.parent-nav{
margin: 0px;
padding: 0px;
position: absolute;
}
.parent-nav > li{
float: left;
list-style-type: none;
padding: 0px;
margin:0px;
width: 100px;
}
.parent-nav > li > span{
}
.parent-nav > li > span > a{
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
background-position: center;
background-repeat: repeat-x;
border-bottom-style: none;
color: #ffffff;
display: block;
margin: 0px;
padding: 13px 20px;
border-right: 1px solid #4B4A4A;
}
.toggle{
width: 100px;
height: 100%; /*when i remove this my image slider shifts form right */
margin: 0px;
padding: 0px;
float: right;
}
.toggle > a{
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
border-bottom-style: none;
color: #ffffff;
padding: 12px 34px 12px 34px;
margin: 0 0 0 0;
border-right: 1px solid #4B4A4A;
display: block;
}
.toggle > a.icon{
display: block;
}
#slider{
height: 300px;
border: #1F1F1F 20px solid;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#slider > .slider-container{
position: relative;
width: 500%;
height: 100%;
top: 0;
left: 0;
animation: animate 20s infinite;
z-index: -1;
}
.slider-container > .sider-image{
position: relative;
width: 20%;
height: 100%;
margin: 0;
float:left;
}
.slider-container > .sider-image > .silder-content{
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
position: absolute;
bottom: 30px;
left: 0px;
right: 500px;
padding: 5px;
transition: 0.5s;
}
.slider-container > .sider-image > .silder-content > h4{
color: #fff;
font-family: sans-serif;
font-size: 15px;
font-style: normal;
font-weight: bold;
padding: 0 0 0 0;
margin: 0px;
transition: 0.5s;
text-decoration: underline;
}
.slider-container > .sider-image > .silder-content > p{
color: #fff;
font-family: sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
padding: 5px;
margin: 0px;
transition: 0.5s;
}