Initially, my menu was perfectly styled with the following CSS 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;
}
However, I decided to add some CSS code to create a responsive banner using divs at the top of my website:
.wrapper {
width: 100%;
overflow: hidden;
}
.container {
width: 100%;
margin: 0 auto;
}
.banner-img {
width: 100%;
}
After adding this new code, my menu now appears messy with too much space above the menu items...
I noticed that adjusting the padding settings on ul.Menu li a makes a difference, but I'm struggling to get it right with just those tweaks. Can anyone provide some guidance? :)