De menu hamburguer para menu normal

Bom pessoal estou estudando Design responsivo(mobile first), ai to passando o meu menu hamburguer de smartphone para menu normal

só que não to conseguindo colocar meu menu dentro do cabeçalho.

Como ta ficando: https://prnt.sc/fettml

MENU HAMBURGUER

header {z-index: 3;}
header label {font-size: 2em; color: #fff; cursor: pointer; float: right; margin: 1% 3%;} #btn-menu {display: none;}

.menu {position: absolute; width: 100%; transform: translateX(-100%); transition: all 0.7s; top: 100%;}
#btn-menu:checked ~ .menu {transform: translateX(0%);}

.menu ul {background: #555;}
.menu ul ul {width: 100%; position: absolute; background: rgba(0,0,0,0.3); width: 100%; display: none;}
.menu ul li ul {position: static;}
.menu ul li ul li a {padding: 15px 20px;}
.menu a {display: block; padding: 15px 10px; color: #fff; font-size: 1.1em;}
.menu a:hover {background: rgba(0,0,0,0.2);}
.menu a:active {background: rgba(0,0,0,0.2);}
.menu i {position: absolute; float: right; right: 4%; font-size: 1.1em;}

.hr-1 {border: 1px solid #8fc048; width: 100%;}
.pdc {background-color: #8fc048;} .pdc a:hover{background: rgba(0,0,0,0.0); background-color: #8fc041;}

MEDIA SCREEN

@media screen and (min-width: 960px) {
/ MENU /
header label {display: none;}
.menu {position: absolute; transform: none; transition: none;}
.menu ul {display: flex; float: right;}
.menu ul ul {background-color: #555; width: auto;}
.menu li {margin-left: 30px; width: auto;}
.menu ul li ul li a {padding: 16px 12px;}
.menu ul ul li {margin-left: 0px;}
.menu ul li:hover ul {display: block !important; position: absolute;}
.menu i {position: relative; float: none; left: 4px; font-size: 0.9em;}
}