Why is the text in my navbar overlapping? - html

Question

I have a rather nice navbar but unfortunatly, when I resize my laptop window a bit, the text starts overlapping. It seems to be stuck in the middle and wont make use of all the space, despite me having checked throughly that here are no padding or margins causing this.
This is how it looks on a big screen
this is the problem when I narrow the window a bit
Could someone please help me figure out why this is happening, please?
I would be very grateful.
My main CSS navbar (displayed on small screens):
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* I tilfælde af at der skal cleares */
br.tabula {
clear: both;
}
a {
text-decoration: none;
color: orange;
}
/*Fjerner underline osv.*/
a:link, a:visited {}
a:hover {}
a:active {}
/***********************************************************/
/* Specielle! */
/***********************************************************/
/***********************************************************/
/* Billeder! Img! ****** Video! */
/***********************************************************/
#burger {
width: 15px
}
img.lille-l {
float: left;
margin: 8px 20px 20px 0;
width: 160px;
height: 165px;
}
img.mellem-r {
float: right;
padding: 20px;
width: 350px;
}
img.top {
margin: 8px 0 20px 0;
}
.sponsor {
width: 50px;
height: 50px;
border: 0;
padding-bottom: 22px;
}
.klik {
padding: 5px;
box-shadow: 3px 5px #888888;
}
#socialbar img {
width: 30px;
height: 30px;
}
iframe {
width: 390px;
height: 250px;
float: left;
padding: 10px 15px 10px 0px;
border: none;
}
/***********************************************************/
/* Tekst! */
/***********************************************************/
h1, h2, h3 {
margin: 0 0 1% 0
}
/*****************************************************************************/
/* HEADER! ****** BANNER! */
/******************************************************************************/
#bannerkat {
margin-top: 1%;
width: 100%;
height: 46px;
background-image: url("billeder/katte/mathilde.jpg");
background-size: cover;
color: white;
border-bottom: solid 1px #444444;
}
/******************************************************************************/
/* NAV! */
/******************************************************************************/
/* Menu Button */
#menu-button {
z-index: 1;
text-align: center;
padding: 5px 5px 5px 5px;
position: absolute;
position: fixed;
top: 15px;
right: 5px;
transition: all 0.2s ease;
cursor: pointer;
width: 50px;
height: 35px;
background-color: #19c589;;
border-radius: 5px; /* pæne runde hjørner*/
-moz-border-radius: 5px; /* Fox*/
-webkit-border-radius: 5px; /* IE */
}
nav p {display:none;}
#mainlogo {display:none;}
#menu-button .bar {
display: block;
height: 4px;
background: black;
margin: 4px;
}
#menu-checkbox {
display: none;
}
#menu-checkbox:checked ~ #menu-button {
transform: rotate(90deg);
}
nav ul {
position: fixed;
display: none;
width: 100%;
}
#menu-checkbox:checked ~ #menu {
display: block;
}
#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
border-radius: 20px;
overflow: hidden;
}
#menu li {
width: 100%;
background-color: beige;
text-align: center;
padding: 7px 2px 7px 2px;
}
This is the code for the nav in the images, displayed on larger screens with media query:
#mainlogo {display: block;}
#bannerkat {display: none;}
#menu-button {
display: none;
}
#menu {
display: block;
border-radius: 0;
text-align: center;
position: relative;
}
.mainheader {width: 100%; padding: 0 auto;
margin: 0}
#menu ul {width:100%; padding: 0 auto;
margin: 0}
#menu li {
display: inline-block;
width: 12%;
background: none;
padding: 0 ;
margin: 0;
}
#menu li a {
font-size: normal;
text-decoration: none;
color: #505050;
text-align: center;
line-height: 75px;
text-transform: uppercase;
transition: all .4s ease;
display: inline-block;
width: 100%;
border-top: 5px solid #80bb80;
}
#menu li:nth-of-type(2) a {
border-top: 5px solid #9b5e5e;
}
#menu li:nth-of-type(3) a {
border-top: 5px solid #5656b3;
}
#menu li:nth-of-type(4) a {
border-top: 5px solid grey;
}
#menu li a:hover {
border-top: 5px solid darkgreen;
}
}
nav { font-family: helvetica, arial, sans-serif;}
/* højde for billed-sektion*/
section {min-height: 204px;}
#baggrund {
background:
url("billeder/katte/sophi.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;}
#mainlogo {
font-size: 37px;
color: white;
border: 7px solid white;
display: inline-block;
padding: 10px;
position: absolute;
height: 123px;/* hvid boks*/
line-height: 25px;
top: 202px;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000; }
/* og omegns */
#mainlogo p {font-size: 20px; padding:5px;}
.vector{width: 60px;
margin-left: -450px;
margin-top: -36px;}
.mainheader {margin-top: 10px;}
/* Navigations menuen (links osv) */
#nav_wrap {
background: #f9f4ea;
width: 100%;
white-space: nowrap;
float: left;
height: auto;;
position: relative;
margin-top: 144px;
bottom: 0;
overflow: hidden;
z-index: 00;
opacity: .9;
box-shadow: 0px 1px 4px beige;
padding: 0;
}
/* MAIN! BODY! *********************************************************/
body {
background-image: url("billeder/bgorange.jpg");
background-size: cover;
color: black;
/* Base font size (14px)? 7%*/
font-family: sans-serif, arial;
line-height: 1.5;
text-align: left;
}
.body { width: 90%;}
.maincontent {
line-height: 20px;
width: 79%;
float: left;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}

Answer 1

#Ginger
You should remove fixed width: 12% from #menu li.

Answer 2

#menu li word needs to be wrapped and font-size should be small on lower screen size. i.e word-wrap:break-word