Устранение разрыва между элементами HTML

Question

Я пытаюсь заставить это выпадающее меню работать, но между заголовком и панелью меню есть пробел.

http://codepen.io/xdtrammell/pen/zneDa

Вот мой CSS для двух контейнеров:

.menu-bar { 
    width:100%; 
    background-color: #f50057; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
} 

.menu-drop { 
    background-color:#212121; 
    border-style: solid; 
    border-color:#f50057; 
    border-top:0px; 
    border-width: 2px; 
    border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px; 
    width:99.6%; 
    height:80px; 
} 

EDIT: Мы Fixed разрыва элементов, но при использовании тумблера еще появляется зазор.

Answer 1

ваш .navicon просто беда;) вот исправление
и Codepen demo

.navicon { 
    /*float: right;*/ 
    height: 6px; 
    width: 34px; 
    margin-right:50px; 
    border-top: 15px double #212121; 
    border-bottom: 5px solid #212121; 
    font-size: 0; 
    /*position:relative;*/ 
    position:absolute; /* added */ 
    /*bottom:55px;*/ 
    right:6px; /* added */ 
    top:38px; /* added */ 
    cursor:pointer; 
    transition: all .3s ease-in-out; 
} 

Answer 2

Ваш h1 и ваш .button оба имеют поля на вершинах и основаниях.

Я бы предложил какой-то сброс, чтобы установить маржу всего на 0 (таким образом, только поля в игре определяются вами).

Я добавил следующий код. Вот обновленный Codepen

* { 
    margin: 0; 
} 

Answer 3

Вот обновленный код удаления margin:10px из тела или же сделать его как margin:0

CSS

* { 
    margin: 0; 
    paddin:0; 

} 

body { 
    font-family: 'Roboto', sans-serif; 
    margin:0px; 
}