yo quiero que cuando este en tamaño para celulares en la pagina el menu este centrado y abajo del logo y e titulo , el problema es que no se me centra
* {
max-width: 2000PX;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial;
}
body{
background: #786767;
}
header {
width: 100%;
height:90px;
background: white;
position: fixed;
z-index: 100;
}
.container-header{
width: 100%;
max-width: 2000px;
position: relative;
display: flex;
}
.container-logo-title{
display: flex;
}
.container-logo-title img{
width: 80px;
height: 80px;
margin-left: 0%;
margin-left: 10px;
margin-top:5px
}
.container-logo-title h1{
font-weight: 500;
margin-top: 23px;
margin-left: 10PX;
font-size: 25px;
}
.container-menu{
position: absolute;
right: 0;
}
.menu ul{
display: flex;
margin-right: 20px;
margin-left: 20px;
}
.menu ul li{
list-style: none;
float:right;
margin-top: 30px;
margin-left: 10px;
font-size: 20px;
}
#check{
display: none;
}
.icon-menu{
display: none;
}
.menu li a {
padding: 15px;
position: left;
text-decoration: none;
color: black;
font-size: 24px;
}
/*efecto de ponerse en color rojo cuando pase el mouse */
.menu li a:hover {
background: #9D0B1D;
border-radius: 20px;
}
@media screen and (max-width:880px){
.menu li a {
padding: 20px;
text-decoration: none;
color: black;
font-size: 19px;
}
.container-menu{
position:absolute;
align-content: center;
width: 100%;
}
.menu {
background: white;
margin-top :88px;
margin-right:0px;
margin-right: auto;
width: 100%;
max-width: 888;
padding-bottom: 15px;
z-index: 90000;
}
.container-logo-title img{
margin-left: 0px;
}
}
@media screen and (max-width:900px){
.container-logo-title h1{
margin-top: 29px;
font-size: 14;
}
}
<header>
<DIV CLASS="container-header">
<DIV CLASS= "container-logo-title">
<img src="imagenes/logo.jpg" class="img-logo">
<H1>MELAMOBLAMIENTOS</H1></DIV>
<input type="checkbox" id="check" >
<label for="check" class="icon-menu"></label>
<div class="container-menu">
<nav class= "menu">
<ul>
<li><a href="#Inicio">Inicio</a></li>
<li><a href="#Servicios">Servicios</a></li>
<li><a href="#Trabajos">Trabajos</a></li>
<li><a href="#Contacto">Contacto</a></li>
</ul>
</nav>
</div>
</DIV>