Bellathea Bellathea - 2 months ago 6
CSS Question

Navigation bar destroyed when adding a code for divs into CSS

Well, I had a perfect menu with this code, just about right with this code in my css file

ul.Menu {
list-style-type: none;
margin: 10px;
overflow: hidden;
background-color: #ffffff;
border-style: solid;
border-color: #e9055c;
border-width: 2px;
font-weight: bold;
font-family: arial, sans-serif;
text-align: center;
margin: 0 auto;
}

ul.Menu li{
border-right: 1px solid #e9055c;
display: inline-block;
}

ul.Menu li a {
display:block;
color: #e9055c;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

ul.Menu li a:hover {
background-color: #f6b0ce;
}

ul.Menu li:last-child {
border-right: none;
}


but then I added this to my CSS-code to create a responsive banner via divs at the top of my website:

.wrapper {
width: 100%;
overflow: hidden;
}

.container {
width: 100%;
margin: 0 auto;
}

.banner-img {
width: 100%;
}


and now my menu looks like this- totally crappy with too much space above the menu items...

image

I already found out, that it changes, when I'm changing the padding settings on the ul.Menu li a, but I can't get it right with just those...
Can you please help me? :)

Answer

You've written the margin property twice. Delete the margin : 0px style from ul.Menu, it is causing the problem.