My div is bigger than the width of my window

Question

This is the css my div . İ expect the background to fill the entire screen, but it is higher than my screen resolution, so a lower scroll bar will appear

 .hero-unit { padding:60px; margin-top: 60px; background: url("../img/bar2.jpg") no-repeat scroll 0; height:233px; width:100%; left:0px; background-size: cover; position:absolute; background-color:#eeeeee; } 

Answer 1

You can use window size

 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; 

This makes it so that when you add padding, margins or borders, it will not affect the width. (this will not work IE7 and below)

Answer 2

You add padding to already 100% width.

What you need to do (if you use interest) has changed your addition by a percentage and made it up to 100 percent.

For example:

 padding:5%; width:90%; 

---

I also found an alternative using overflow: hidden to remove the scrollbar. This will not fix your problem, although adding will still overflow the window, but not noticeably.

 html, body { width:100%; } body { overflow:hidden; } 

See jsfiddle here .

Answer 3

remove padding if necessary, then reduce the width .

Try to save them as a percentage, for example

 padding:5%; /*desired value*/ width:80%; /*desired value*/ 

when they are added, it must be less than or equal to 100%. If you have margin then consider it as well. (suppose margin:5%; )

Example:

 <----------------100%----------------> margin | padding| div |padding | margin |<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->| 

This is the same for adjusting horizontally (width) or vertically (height).

Answer 4

This may be due to fields and body filling.

Add this block to your body to see if it helps:

 body { margin: 0 padding: 0 } 

In addition, you define an addition to an already 100% element, making it larger than the body.

Answer 5

Often, horizontal overflow occurs due to an element whose opacity is 0. You also cannot see the element, but this leads to horizontal overflow. Add the following code to css.

 body { overflow-x: hidden; } .hidden-thing { position: absolute; left: 100%; width: 50px; height: 50px; opacity: 0; }