Dear Folks !
I´m having problems with my navigation at different screensizes.
At current level the navigation display is nearly the way i want it for the bigger screensizes.
But at media querry @media screen and (max-width: 320px) I want the navigationlinks to stack horizontally which i managed to do but for some reason i cant remove the margin between the now horizally stacked navilinks.
What is my mistake ? Thx a lot.
The Html
<body>
<div class="topnavibar">
<div class="menubar1">
<a href="index.html">Home</a> 
<a href="Unsere Philosophie.html">Unsere Philosophie</a> 
<a href="Ueber uns.html">Über uns</a> 
<a href="Portfolio.html">Portfolio</a> 
<a href="Kontakt.html">Kontakt</a> 
<a href="Partner Sites.html">Partner Sites</a>
<div id="flags">
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" onclick="goToAUT()" src="AT.png" height="20" width="20"alt="AUTFlag" />
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" onclick="goToGB()" src="GB.png" height="20" width="20"alt="GBFlag" /></div>
</div>
</div>
BigScreen Css
.topnavibar{position:relative;margin-top:1%;height:13%;margin-left:10%;margin-right:10%;text-align:center;font-size: 250%;
background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
.menubar1{padding:2.3%;margin-top:1%;margin-bottom:1%;margin-left:1%;margin-right:1%;border:black 1px solid;border-radius:3px;}
.menubar1 > a {font-family:arial,helvetica,sans-serif;
font-size:17px;
background:#333;
padding: 2% 2%;
color:gold;
margin-right:10px;
text-decoration:none;
border-radius:3px;
-webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
-ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
-moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
-o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
transition:background 0.3s linear 0s,color 0.3 linear 0s;}
.menubar1 > a:hover{background:gold;color:#333;}
#flags{position:absolute;top:1%;right:3%;cursor: pointer;}
Small Screen Css
@media screen and (max-width: 320px) {
.topnavibar{position:relative;margin-top:1%;height:13%;margin-left:1%;margin-right:1%;text-align:center;font-size: 250%;
background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
.menubar1{border:black 1px solid;border-radius:3px;}
.menubar1 > a {box-sizing:border-box;display:block;font-family:arial,helvetica,sans-serif;
padding:0; margin:0;
font-size:17px;
background:#333;
color:gold;
text-decoration:none;
border-radius:3px;
-webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
-ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
-moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
-o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
transition:background 0.3s linear 0s,color 0.3 linear 0s;}
#Banner{position:relative;top:1em;width: 100%;display: block;margin-left: auto;margin-right: auto;}
}