title: zoom out not working in google Chrome
body: <p>i had my site and it's working find and looks like this.</p>
  
  <p><a href="https://i.stack.imgur.com/FmNZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FmNZs.png" alt="enter image description here"></a></p>
  
  <p>but when i zoom out 100% to 25% it's looks like this.</p>
  
  <p><a href="https://i.stack.imgur.com/VhVXi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VhVXi.png" alt="enter image description here"></a></p>
  
  <p>where should be problem??? and it's zoom out fine in firefox but problem in chrome...i am using bootstrap and slider is carousel.and my html for header where menu comes is.</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- header-section-starts --&gt;
          &lt;div class="home"&gt;
                  &lt;a href="index.php"&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="header-top"&gt;
              &lt;div class="social-icons"&gt;
                  &lt;a href="https://www.facebook.com/Jacklin-Leather-Pvt-Ltd-1661694880710794" target="_blank"&gt;&lt;i class="facebook"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="https://www.twitter.com/divyjesadiya" target="_blank"&gt;&lt;i class="twitter"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="https://plus.google.com/+DivyeshJesadiya" target="_blank"&gt;&lt;i class="googlepluse"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;span class="menu"&gt;&lt;img src="images/nav.png" alt=""/&gt;&lt;/span&gt;
              &lt;div class="top-menu"&gt;
                  &lt;ul&gt;
                  &lt;nav class="cl-effect-13"&gt;
                      &lt;li&gt;&lt;a href="about.php" id="about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="product.php" id="product"&gt;Products&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="showroom.php" id="showroom"&gt;E-Showroom&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.php" id="contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="typography.php" target="_blank" id="typo"&gt;E-Catalog&lt;/a&gt;&lt;/li&gt;
                  &lt;/nav&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- script for menu --&gt;
                  &lt;script&gt; 
                      $( "span.menu" ).click(function() {
                      $( ".top-menu ul" ).slideToggle( 300, function() {
                       // Animation complete.
                      });
                      });
                  &lt;/script&gt;
              &lt;!-- //script for menu --&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;!-- header-section-ends --&gt;
  </code></pre>
  
  <p>and for slider is.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;div data-example-id="simple-carousel" class="bs-example"&gt;
  &lt;div data-ride="carousel" class="carousel slide" id="carousel-example-generic"&gt;
  &lt;ol class="carousel-indicators"&gt;
    &lt;li class="active" data-slide-to="0" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
    &lt;li data-slide-to="1" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
    &lt;li data-slide-to="2" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
    &lt;li data-slide-to="3" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;div role="listbox" class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img alt="im1" src="images/slide/im1.jpg"
      data-holder-rendered="true"&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img alt="im2" src="images/slide/im2.jpg"
      data-holder-rendered="true"&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img alt="im3" src="images/slide/im3.jpg"
      data-holder-rendered="true"&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img alt="im4" src="images/slide/im4.jpg"
      data-holder-rendered="true"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control"&gt;
    &lt;span aria-hidden="true" class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control"&gt;
    &lt;span aria-hidden="true" class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and css for header is.</p>
  
  <pre><code>.home{
  float:left;
  width:20%;
  background: #22292F;
  padding: 1.44em 1em;
  position: relative;
  }
  span.glyphicon.glyphicon-home {
  margin-top: -6px;
  font-size: 21px;
  color: #fff;
  float: right;
  }
  .top-menu{
  float:left;
  margin-top:9px;
  }
      .cl-effect-13 a {
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s;
  }
  
  .cl-effect-13 a::before {
  position: absolute;
  top: 20%;
  left: 50%;
  color: transparent;
  content: '.';
  text-shadow: 0 0 transparent;
  font-size: 1.2em;
  -webkit-transition: text-shadow 0.3s, color 0.3s;
  -moz-transition: text-shadow 0.3s, color 0.3s;
  transition: text-shadow 0.3s, color 0.3s;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
  }
  
  .cl-effect-13 a:hover::before,
  .cl-effect-13 a:focus::before {
  color: #0078B5;
  text-shadow: 10px 0 #fff, -10px 0 #fff;
  }
  
  .cl-effect-13 a:hover,
  .cl-effect-13 a:focus {
  color: #FFFFFF;
  }
  
  /* Effect 14: border switch */
  .cl-effect-14 a {
  padding: 0 20px;
  height: 45px;
  line-height: 45px;
  }
  .social-icons{
  float:right;
  margin-right: 22%;
  }
  .social-icons i{
  width:35px;
  height:35px;
  background: url('../images/img-sprite.png') no-repeat 0px 0px;
  display:inline-block;
  cursor:pointer;
  }
  .social-icons i:hover {
  opacity: 0.5;
  }
  i.facebook{
  background-position:0px 0px;
  }
  i.twitter{
  background-position:-40px 0px;
  }
  i.googlepluse{
  background-position:-80px 0px;
  }
  .top-menu ul li{
  display:inline-block;
  }
  .top-menu ul li a{
  color:#fff;
  font-weight:400;
  font-size:22px;
  text-decoration:none;
  margin:-5px 15px;
  font-family: 'Myriad ProPoP', times, sans-serif;
  }
  @media (max-width: 1200px) {
  .top-menu ul li a{
      font-size:18px;
      margin:0 15px;
  }
  }
  
  @media (max-width: 992px) {
  .top-menu ul li a{
      font-size:18px;
      margin:0 8px;
  }
  }
  .top-menu ul li a:hover{
  color: #0078B5;
  }
  .top-menu ul li a.active{
  color: #0078B5;
  }
  .header-top {
  background: #22292F;
  padding: .5em 15px;
  float: left;
  width: 80%;
  position: relative;
  }
  </code></pre>
  
  <p>please help me.</p>