我无法将菜单和文字留在div标签内?
有人可以帮助我吗?
www.sverkel.dk/index3.php
body {
margin: 0;
font-family:verdana;
}
header {
background: #cf5858; /* Old browsers */
background: -moz-linear-gradient(top, #cf5858 0%, #902727 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf5858), color-stop(100%,#902727)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cf5858 0%,#902727 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cf5858 0%,#902727 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cf5858 0%,#902727 100%); /* IE10+ */
background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
}
#btn-menu {
display: none;
}
header label {
display:none;
width: 30px;
height:20px;
padding:10px;
border-right:1px solid #fff;
}
header label:hover {
cursor: pointer;
}
.menu ul {
margin:0;
list-style:none;
padding:0;
display:flex;
justify-content: center;
}
.menu li {
}
.menu li:hover {
background:#9E3C3E;
}
.menu li a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
main {
padding:20px;
}
@media (max-width:768px) {
header label {
display:block;
}
.menu {
position:absolute;
background: #cf5858; /* Old browsers */
background: -moz-linear-gradient(top, #cf5858 0%, #902727 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf5858), color-stop(100%,#902727)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cf5858 0%,#902727 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cf5858 0%,#902727 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cf5858 0%,#902727 100%); /* IE10+ */
background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
width:70%;
margin-left: -70%;
transition: all 0.3s;
}
.menu ul {
flex-direction:column;
}
.menu li {
border-top: 1px solid #fff;
}
#btn-menu:checked ~ .menu {
margin:0;
}
}
<div class="container">
<div class="top" id="cell1"></div>
<div class="midt" id="cell2">
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu"><img src="billeder/menux.png"></label>
<nav class="menu">
<ul>
<li><a href="#">Forside</a></li>
<li><a href="#">Produkter</a></li>
<li><a href="#">Priser</a></li>
<li><a href="#">Om os</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
</div>
<div class="indhold" id="cell3" align="center"><br><h2>Velkommen til vores nye hjemmeside</h2><br><br>Her på siden vil du finde en masse informationer om vores services, produkter, priser og meget andet. Siden er stadig under opbygning...</div>
<div class="bund" id="cell4"></div>
</div>