Good day, I am in need of assistance with a menu layout for my website. My goal is to have the title centered with the menu flexed out to the sides, but I'm encountering some issues. The colors included are just for testing purposes and will be updated later on. Below is the code snippet. I trust you can grasp the issue and offer your expertise.
HTML
@import url('https://fonts.googleapis.com/css?family=Pacifico');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
vertical-align: center;
}
/* ----- HEADER -----*/
body header {
width: 100%;
height: 90px;
margin: 0;
padding: 0;
background-color: black;
border-bottom: 2px solid #FFFFFF;
box-shadow: 0px 8px 8px 0px rgba(215,223,237,.8);
}
/* ----- HEADER TITLE ----- */
body header .TITLE {
line-height: 90px;
width: 20%;
background-color: aqua;
position: absolute;
left: 40%;
right: 40%;
text-align: center;
}
body header .TITLE h1 {
margin: 0;
font-family: 'Pacifico', cursive;
font-size: 45px;
color: orange;
}
/* ----- HEADER MENU LEFT ----- */
body header .HEADERMENULEFT {
float: left;
}
body header .HEADERMENULEFT ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
body header .HEADERMENULEFT ul li {
flex-grow: 1;
float: right;
text-align: center;
width: 100%;
}
body header .HEADERMENULEFT ul li a {
color: white;
text-decoration: none;
display: block;
/*line-height: 35px;
margin-top: 22px;
background-color: #90afc5;
height: 35px;
margin-left: 50px;
margin-right: 50px;
border-radius: 50px;*/
}
/* ----- HEADER MENU LEFT ----- */
/* ----- HEADER MENU RIGHT ----- */
body header .HEADERMENURIGHT {
float: right;
}
body header .HEADERMENURIGHT ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
body header .HEADERMENURIGHT ul li {
flex-grow: 1;
float: right;
text-align: center;
width: 100%;
}
body header .HEADERMENURIGHT ul li a {
color: white;
text-decoration: none;
display: block;
/*line-height: 35px;
margin-top: 22px;
background-color: #90afc5;
height: 35px;
margin-left: 50px;
margin-right: 50px;
border-radius: 50px;*/
}
/* ----- HEADER MENU RIGHT ----- */
/* ----- HEADER ----- */<header>
<div class="TITLE">
<h1>MyWeb</h1>
</div>
<div class="HEADERMENULEFT">
<ul>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
</ul>
</div>
<div class="HEADERMENURIGHT">
<ul>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
<li><div class="BORDER"><a href="#">TEST</a></div></li>
</ul>
</div>
</header>