CSS body width does not fill 100 percent

Question

I am developing a webpage and I noticed this problem.

Please write everything you have in mind, it will be very useful!

Check out the website here

EDIT: added link to website

Answer 1

you need to use CSS reset :

use this code:

body, html{ margin:0; padding:0; } 

the whole element has some default style, you need to reset them.

Answer 2

Ähm, your div.container is 970px wide. And it breaks the width of your body because your layout is not fluid. Using media queries or extended widths will help a lot.

Answer 3

Perhaps some clear:both; are absent.

Up: This is probably not the case, but perhaps a different block width of sub-elements does not allow this page to bypass the entire width. If you have a float, you should think about making clarity in front of the footer (as I see the div on the right).

See that your html / css code will be better :)

Answer 4

try it

 body { margin:0px; padding:0px; width:100%; } 

Answer 5

Is this your expected result? Check it out and let me know as soon as possible

Answer 6

set the maximum width of the image using percent, not pixels, rem, em, etc.

 .resizable-img { max-width: 100%; } 

Answer 7

if you don't need a flexible or fluid design (mentioned in other answers), the final solution is to set a minimum width for the body.

set the minimum width of the body to the widest width of the element (in most cases -.container) and remove the html element of width and width min-width.

 body { width:100%; min-width:980px; } 

You should expect to lose customers when your design does not respond.

Answer 8

It might be worth checking if this might work; it worked for my specific problem.

 body { min-width: fit-content; } 

Added John McNulty's answer in the form of an insert, because links can go as 404. And it actually helped a little to normalize CSS without adding its own browsers to it.

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } 

Answer 9

So this worked for me:

  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 

My padding in sections by 100% added padding to the page width, resulting in a width of 100% + (padding value * 2)

Answer 10

Have you included CSS reset in your page?

http://meyerweb.com/eric/tools/css/reset/

Answer 11

The problem persists only if you resize the browser window. Since this does not disrupt the site, you can leave this problem.

or

If you are creating an unresponsive site, you can do this by simply adding a specific width to the html and body. something like that

 html, body { width:1170px; }