Change of Browsers

0

I made my site with bootstrap, and I'm having some problems, in Mozilla the site is viewed normalemnte, already in Chrome this distorted confirm the images, Does anyone have a clue how to resolve this ??

<divclass="menug">
 <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#manu1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand navbar-brand-centered" href="#"><img class="img-responsive imgLogo" src="img/logo/efloorpqn.png"></a>
  </div>
  <div class="collapse navbar-collapse navbarBorda" id="manu1">
    <div class="posicao">
    <ul class="nav navbar-nav">
      <li class="navbarBorda"><a href="#">Atendimento</a></li>
    </ul>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="navbarBorda"><a href="#entrar">Entrar</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Como Acessar</a></li>
            <li><a href="#">Ideal Para Quem</a></li>
            <li><a href="#">Funcionalidades</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Quero Conhecer</a></li>
            <li><a href="#">Contratar</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Contatos</a></li>
            <li><a href="#">Clientes</a></li>
          </ul>
      </li>
    </ul>
  </div> 
</div>

                /*navbar*/
            .navbar {
                margin-bottom: 0;
                z-index: 9999;
                border: 0;
                font-size: 16px !important;
                line-height: 1.42857143 !important;
                border-radius: 0;
                padding-top: 25px;
                padding-bottom: 25px;     
            }

            .menug .navbar-brand {
                height: 80px;
            }

            .menug .nav >li >a {
              padding-top: 2%;
              padding-bottom: 2%;
              padding-left: 20%;
              padding-right: 20%;
            }

            .menug .navbar-toggle {
              padding: 5px;
              margin: 15px 10px 15px 0;
            }

            .navbarBorda .nav >li >a {
              border-color: #FFFFFF;
              border-style: solid;
              border-width: 1px;
              background-color: #222;
              margin-left: 15px;
              margin-right: 15px;
            }


            @media (max-width: 960px) {
                .navbar {
                    margin-bottom: 0;
                    z-index: 9999;
                    border: 0;
                    font-size: 16px !important;
                    line-height: 1.42857143 !important;
                    border-radius: 0;
                    padding-top: 15px;
                    padding-bottom: 15px;     
                }
                .menug .navbar-toggle {
                  padding: 5px;
                  margin: 10px 5px 10px 0;
                }

                .navbarBorda .nav >li >a {
                  border-style: none;
                  margin-left: 15px;
                  margin-right: 15px;
                }

                .menug .navbar-brand {
                height: 60px;
                }
            }

            .navbar-brand-centered {
                position: absolute;
                left: 50%;
                display: block;
                width: 160px;
                text-align: center;
                background-color: transparent;
                padding-top: 3px;   
            }

            .navbar>.container .navbar-brand-centered, 
            .navbar>.container-fluid .navbar-brand-centered {
                margin-left: -80px;
            }
    
asked by anonymous 04.08.2017 / 22:06

1 answer

2

It is that in the navbarBorda you used the margin, so it takes the element off the edge. Exchanging this margin by padding will work, because the padding is the border spacing inward. Staying like this:

            .navbarBorda .nav >li >a {
              border-color: #FFFFFF;
              border-style: solid;
              border-width: 1px;
              background-color: #222;
              padding-left: 15px;
              padding-right: 15px;
            }
    
10.08.2017 / 18:27