CSS 主体宽度未填充 100%

Question

I'm developing a webpage and I noticed this issue.

Please, post anything you get in mind it will be very helpful!

Check the website here

EDIT: Added the website link

Answer 1

Might want to check if this might work, it did for my particular issue.

body {
    min-width: fit-content;
}

Added the answer of John Mcnulty as an paste because weblinks might go as 404. And this actually helped a bit to normalize the css without having browsers put their own css in 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 2

you need to use CSS reset :

use this code:

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

all element have some style in default you need to reset them.

Answer 3

Ähm, your div.container has a width of 970px. And this breaks your body width because your layout isn't fluid. Use media queries or procentual widths will help a lot.

Answer 4

Maybe some clear:both; that are missing..

Up : It's probably not that, but maybe other sub-elements block width and does not allow the page to take its total width. If you have any float should think about making a clear before the footer (as I see a div on the right).

See your html / css code would be better :)

Answer 5

try this

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

Answer 6

Though this is a very old issue, I have personally run into this thread twice without being able to resolve this issue (I keep forgetting what I did to fix it). For future viewers (me included) where setting padding and margin to 0 didn't magically fix your problem try "position: fixed" in the body.

body {
  position: fixed;
  overflow-y: scroll;
  padding: 0;
  margin: 0;
  width: 100%;
}

Answer 7

set the max-width of your image using the percent, rather than pixel, rem, em, etc.

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

Answer 8

Ok so this worked for me:

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

My padding on sections of 100% was adding the padding to the page width resulting in width 100% + (padding value * 2)

Answer 9

Have you included a CSS reset in your page?

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

Answer 10

is it your expected result? Check it and tell me as soon as possiable

Answer 11

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

set min-width on body to the most wide element width(in most cases - .container) and remove width and min-width form html element.

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

you must expect that you will lose customers when your design is non-responsive

Answer 12

The issue persist only if you resized the Browser window. As its not breaking the website, You could leave that issue.

or

If you are creating a non-responsive site, You can do this simply by adding specific width to html and body. something like this

html, body {
  width:1170px;
}