Not align dropdown content properly - html

Question

I am trying to create a vertical drop-down menu but i am failing to align drop-down content properly. I is appearing as if indented, which i don't want.
Drop-down Text should be vertically aligned
#sidenav{
margin-top:25%;
margin-left:25%;
width:250px;
max-width:250px;
background:#454545;
}
#sidenav input {
box-sizing: inherit;
width:100%;
padding:5px;
margin-top: 5px;
border:none;
border-bottom: 2px solid #666666;
background: transparent;
color:white;
font-size: 18px;
font-style: italic;
opacity: 0.8;
}
#sidenav li{
list-style:none;
font-size: 18px;
width:inherit;
padding:5px 0px 5px 5px;
position: relative;
color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
text-transform: uppercase;
}
#sidenav a{
text-decoration: none;
display: block;
color:#ffffff;
margin:0px;
}
.dropdown-content{
background:#666666;
display: none;
}
.dropdown-bt:hover .dropdown-content{
display: block;
}
<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<li>item 1</li>
<li>item 2</li>
<li class="dropdown-bt">dropdown - content
<ul class="dropdown-content">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</section>
Drop-down content is giving some kind of margin on its left
which i don't want.

Answer 1

If I understood you correctly, remove the padding from unordered list:
ul {
padding:0;
}
In your case:
.dropdown-content{
background:#666666;
display: none;
padding:0;
}

Answer 2

There is a 5px padding from its parent (#sidenav li) so you will need to compensate somehow, one way is to do margin-left: -5px in the child (.dropdown-content)
#sidenav{
margin-top:25%;
margin-left:25%;
width:250px;
max-width:250px;
background:#454545;
}
#sidenav input {
box-sizing: inherit;
width:100%;
padding:5px;
margin-top: 5px;
border:none;
border-bottom: 2px solid #666666;
background: transparent;
color:white;
font-size: 18px;
font-style: italic;
opacity: 0.8;
}
#sidenav li{
list-style:none;
font-size: 18px;
width:inherit;
padding:5px 0px 5px 5px;
position: relative;
color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
text-transform: uppercase;
}
#sidenav a{
text-decoration: none;
display: block;
color:#ffffff;
margin:0px;
}
.dropdown-content{
background:#666666;
display: none;
margin-left:-5px; /*compensate to the 5px padding from its parent*/
padding: 0; /*optional if you don't want padding inside*/
}
.dropdown-bt:hover .dropdown-content{
display: block;
}
<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<li>item 1</li>
<li>item 2</li>
<li class="dropdown-bt">dropdown - content
<ul class="dropdown-content">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</section>

Answer 3

You never declared the unordered list for your top level list and the padding on your input field (search) was causing the field to be wider than the max width that you set in you container. To adjust for this padding I modified how the padding was being applied (top and bottom padding has 5px and left and right have 0).
#sidenav{
margin-top:25%;
margin-left:25%;
width:250px;
max-width:250px;
background:#454545;
}
#sidenav input {
box-sizing: inherit;
width:100%;
padding:5px 0px;
margin-top: 5px;
border:none;
border-bottom: 2px solid #666666;
background: transparent;
color:white;
font-size: 18px;
font-style: italic;
opacity: 0.8;
}
#sidenav li{
list-style:none;
font-size: 18px;
width:inherit;
padding:5px 0px 5px 5px;
position: relative;
color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
text-transform: uppercase;
}
#sidenav a{
text-decoration: none;
display: block;
color:#ffffff;
margin:0px;
}
.dropdown-content{
background:#666666;
display: none;
}
.dropdown-bt:hover .dropdown-content{
display: block;
}
<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<ul>
<li>item 1</li>
<li>item 2</li>
<li class="dropdown-bt">dropdown - content
<ul class="dropdown-content">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</section>