CSS Applying Width on The Body

CSS body element width not working

The body actually is taking that width, and it is centering. It's just a CSS quirk that makes the background occupy the whole page rather than the space actually occupied by the body element.

A way to fix this is to include a background property on the html tag.

Here's an example.

However, as mentioned by others, this probably isn't something you want to do. It's better to add a div within the body and style that.

css applying width on the body

If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.

See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.

This is described in the CSS2 specifications as so:

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

Changing the background color and width of the body element

You're actually doing it, except when you don't declare a background color for the html element, it then takes the background color of the body element. Hence, you're not seeing the difference.

Simply give the html element a different background color, and also give body some height:

html {    background-color: red;     /* new */}
body {    border: 1px solid black;    width: 500px;    height: 500px;              /* new */    margin: 0 auto;    background: black;}

How to specify width of any inner element as a percentage of width of Body?

You shouldn't stylize your <body>.

Instead add a wrapper with a combo of view port units and max-width.

.container {  width: 100vw;  max-width: 1440px;  height: 100vh;  margin: 0 auto;  background-color: green;}

<div class="container"></div>

Expand body element width beyond width of window

I just added following CSS. And it works.

body {
    float: left;
    min-width: 100%;
}

My width is bigger than my screen, but body and html are set to 0 padding and margin and 100% width

Are your images what is making your screen width overflow? You can always use box-sizing to help with clearing margins and padding: https://css-tricks.com/box-sizing/

CSS body width 100 percent

The HTML element is effectively the viewport (browser window visible area) the body element is the actual content of the page.

HTML

The HTML root element (<html>) represents the root of an HTML or XHTML
document. All other elements must be descendants of this element.

Body

The HTML Body (<body>) element represents the main content of an HTML
document. There is only one element in a document.

Should I declare my body css with body {width:100%;}?

By default, your body element will fill the entire screen, you do not need to add any CSS.

Any element with display: block, which body has by default, will fill the width available.