jrsilverio

No caso, eu gostaria que alinha-se apenas as opções, o fundo continua 100% da tela. #menu {background: rgba(0, 0, 0, 0.8);color: #FFF;height: 51px;padding-left: 0px;z-index: 300;left: 0;top: 0;right: 0;margin: 0;} #menu ul, #menu li {margin: 0 auto;padding: 0;list-style: none;} #menu ul {width: 100%;} #menu li {float: left;display: inline;position: relative;} #menu a {display: block;line-height: 51px;padding: 0 14px;text-decoration: none;color: #FFFFFF;font-size: 14px;} #menu a.dropdown-arrow:after {content: "\002B";margin-left: 5px;} #menu li a:hover {color: #CCCCCC;background: #F2F2F2;} #menu input {display: none;margin: 0;padding: 0;height: 51px;width: 100%;opacity: 0;cursor: pointer} #menu label {display: none;line-height: 51px;text-align: center;position: absolute;left: 35px} #menu label:before {font-size: 1.6em;content: "\2261"; margin-left: 20px;} #menu ul.sub-menus{height: auto;overflow: hidden;width: 170px;background: #FFFFFF;position: absolute;z-index: 99;display: none;} #menu ul.sub-menus li {display: block;width: 100%;} #menu ul.sub-menus a {color: #191919;font-size: 16px;} #menu li:hover ul.sub-menus {display: block} #menu ul.sub-menus a:hover{background: rgba(0, 0, 0, 0.8);color: #F2F2F2;} @media screen and (max-width: 800px){ #menu {position:relative} #menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.sub-menus {width:100%;position:static;} #menu ul.sub-menus a {padding-left:30px;} #menu li {display:block;float:none;width:auto;} #menu input, #menu label {position:absolute;top:0;left:0;display:block} #menu input {z-index:4} #menu input:checked + label {color:white} #menu input:checked + label:before {content:"\00d7"} #menu input:checked ~ ul {display:block} } <!-- MENU --> <nav id='menu'> <input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label> <ul> <li><a href='http://'>X</a></li> <li><a class='dropdown-arrow' href='http://'>Produtos</a> <ul class='sub-menus'> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> </ul> </li> <li><a class='dropdown-arrow' href='http://'>Serviços</a> <ul class='sub-menus'> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> </ul> </li> <li><a class='dropdown-arrow' href='http://'>Financeiro</a> <ul class='sub-menus'> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> </ul> </li> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> <li><a href='http://'>X</a></li> </ul> </nav>

Sempre que eu mudo a tag do float, não fica centralizado na forma horizontal, apenas vertical. Sou iniciante ainda, sorry kkk <div class="topnav"> <!--<a href="#"><img src="nr-logo.jpg" width="50"></a>--> <a href="#">Inicio</a> <a href="#">MENU 1</a> <a href="#">MENU 2</a> <a href="#">MENU 3</a> <a href="#">MENU 4's</a> <a href="#">MENU 5</a> <a href="#">MENU 6</a> </div> .topnav { overflow: hidden; background-color: #fff; border-style: outset; border-width: 0.1px; text-align: justify; } .topnav a { float: left; display: block; color: #000; padding: 15px 30px; text-decoration: none; font-weight: normal; text-align: justify; } .topnav a:hover { background: -webkit-linear-gradient(#21d4fd, #b721ff, #21d4fd, #b721ff); background: -o-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff); background: -moz-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff); background: linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: black; }