Почему этот запас продвигает элемент над его родителем? ⇐ Html

[Anonymous]

Я строю веб -сайт с боковой панелью с некоторыми якорными ссылками, а также строка поиска над ним. Это можно увидеть здесь. Я бы хотел, чтобы поисковая панель была немного меньше и в центре боковой панели, поэтому я попытался добавить около 5PX-краю, но это просто вытолкнуло панель поиска над правой стороной боковой панели. Есть ли ошибка в CSS, вызывая это?

Код: Выделить всё

.nav-side-menu {
overflow: hidden;
font-size: 18px;
font-weight: 100;
background-color: #e6e6e6;
position: fixed;
top: 0px;
width: 20%;
height: 100%;
color: #484848;
}
.nav-side-menu .brand {
background-color: #e6e6e6;
line-height: 75px;
display: block;
text-align: center;
font-size: 32px;
border-bottom: 1px solid #484848;
}
.chat-header {
position: fixed;
left: 20%;
width: 80%;
background-color: #e6e6e6;
line-height: 75px;
display: block;
text-align: center;
font-size: 32px;
border-bottom: 1px solid #484848;
border-left: 1px solid #484848;
}

.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 80px;
cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
/*font-family: FontAwesome;*/
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
background-color: #3ab795;
}

.nav-side-menu li {
padding-left: 0px;
border-bottom: 1px solid #484848;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nav-side-menu li a {
padding-left: 20px;
padding-top: 30px;
padding-bottom: 30px;
padding-right: 80%;
text-decoration: none;
color: #484848;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
background-color: #3ab795;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

input[type=text]{
width: 100%;
position: relative;
margin: 5px 0 5px 0;
padding: 3px 10px 3px 20px;
box-sizing: border-box;
border: 1px solid #484848;
border-radius: 20px;
background-color: #e6e6e6;
}

.search-menu{
border-bottom: 1px solid #484848;
}

@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 20px;
top: 5px;
z-index: 10 !important;
padding: 3px;
background-color: #e6e6e6;
color: #484848;
width: 30px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}

@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}

body {
margin: 0px;
padding: 0px;
font-family:  'Roboto', sans-serif;
}< /code>



EB_MQ Message Centre










User ID

[i]

[/i]

Подробнее здесь: https://stackoverflow.com/questions/410 ... its-parent