why div is breaking during zoom in browser?

I am trying to develop responsive theme using wordpress but I div break when I am doing zoom in browser.I am giveing some css code :

   .here {
        background: url("images/header-opacity.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        float: left;
        position: relative;
        width: 100%;
        z-index: 100;
    }
container_24 {
  max-width:980px;
  margin: auto;
  position: relative;
  padding: 0;
  z-index:10;
  /* border-radius:5px; /* L */
}

.grid_24 {
   width: 99%;
}

.grid_24 {
  width: 99%;
}

.topsearch {
  float: right;
  margin-right: 22px;
  max-width: 700px;
}

.toplinks {
  float: right;
  font-size: 0.83em;
  max-width: 688px;
  transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
}

I am giving my site http://bassbrushes.diggsdev.com/blades/.I am unable to find any solution.Any idea would help me lot.

Solutions

I think %100, %99 values causes to this problem. if you change .container_24 .grid_24 it'll be ok.

.container_24 .grid_24 {
    width: 980px;
}
Tags: Css / Wordpress

Similar questions

Why is this Container Div Breaking My Design
Im trying to put these 2 elements in a container, the read more button, and another floating button, and i want them both to float left. When i run the code, the elements are not inside the div and is like 200px below the container. Why? The CSS
Div alignment to center on zoom in & out
I have site http://www.d1210091-6206.cp.blacknight.com/site/home/ having alignement issue for zoom in & out for the particular section (News & fb ) div id footerwrapper on the page. All other are aligned centerly on zoom in & out. I am sending you the screen shot also. http://screencast.com/t/e95jEwR6dki
Mega menu not working same in all browser and breaking responsiveness
I'm having a very strange issue with my portfolio website. In Google Chrome browser everything working smoothly, there is no problem. But in other browser like Firefox, Microsoft Edge, Opera Mini, the mega menu is breaking responsiveness. https://www.nockscript.com/ Go to the website, You'll find a menu called "My Creation" hover it using...
Hide div for Safari browser in wordpress and display another div on page load instead
I have 2 galleries, one is a deepzoom composite from microsoft and the other a wordpress short code calling the gallery from the database. Each gallery is in its own div. I need to have the safari gallery display when only in safari and hide the other div. Then when on the other browsers I need to hide the safari div and display the deepzoom galler...
How to make a div with a fixed width push another div with a relative width when resizing the browser window?
I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes...
wordpress site won't stay centered on desktop browser during width resize
Site in progress: http://www.modernfuture.net/wordpress I've been banging my head against the wall over this for hours - when I resize my browsers width (by dragging the browser window's right resize handle) my site maintains that nice responsive centered effect I want for roughly 1/8th of my browsers window size. However when I drag the browser's ...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.