Title in the center / Menu at the sides

Question

Good afternoon, I need help with a menu on my website. I want to have the title in the center and flex the menu at the sides but it does not want to do anything. Please help. The colors are only for the test. I will change them after release. Code below. I hope you understand and will help me with this problem.

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 TITLE ----- */ /* ----- 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> 

Answer 1

Title center and Left Right Menu

 @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; background-color: aqua; float: left; text-align: center; width:20%; } body header .TITLE h1 { margin: 0; font-family: 'Pacifico', cursive; font-size: 45px; color: orange; } /* ----- HEADER TITLE ----- */ /* ----- HEADER MENU LEFT ----- */ body header .HEADERMENULEFT { float: left; width:40%; } body header .HEADERMENULEFT ul { margin: 0; padding: 35px 10px; 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; width:40%; } body header .HEADERMENURIGHT ul { margin: 0; padding: 35px 10px; 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> <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="TITLE"> <h1>MyWeb</h1> </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>