As websites are needing to be responsive to adapt to different screen sizes, you will find that the width property can not be set to set pixel widths. It breaks the layout when the screen sizes become narrow such as portrait layout for tablets and on smart phones. Using percentages for widths on all elements is a way to allow the web page to adapt to different screen sizes.

If you have a style for an element set to width: 100% it is not the same as having it set to width: auto. An element with padding will stretch beyond its container if if has styling of width: 100%. An element of width: aupt, will site nicely inside its containing element.

Inline vs block-level vs inline-block elements

First we need to discuss inline elements vs block-level elements. Some HTML elements are inline elements by default and others are block-level elements by default. This default setting can be changed by specific styles.

Inline elements will only take up as much space as what is contained inside plus any padding.

Examples of inline elements are: <img>, <table>, <td>

Block-level elements will be as wide as the containing element. 

Examples of block-level elements are: <h1> through <h6>, <p>, <ul>, <div>

If a width or a float is assigned to any of these block-level elements, they become inline elements. 

Default width for elements

The default width for elements is width: auto. You do not need to state this unless you are changing a previous width.

For example, you may have three columns on your site when viewed on a large monitor. The widths for these columns are 23%, 50% and 23% with a 2% margin between and each have a float: left style. When the visitor views the site on a small screen, you may want  to have these columns as wide as the screen and stack on top. In this case you set up @media styles.

.left-col {float: left; width: 23%;}
.center-col {float: left: width: 50%;margin-left: 2%}
.right-col {float: left; width: 23%; margin-left: 2%}

@media (max-width: 960px) {
    .left-col {width: auto;float: none;margin: 0;}
    .center-col {width: auto; float: none;margin-left: 0}
    .right-col {width: auto; float: none; margin-left: 0}
}

Padding and Margin with width: auto

If an element has a style of width: auto, and there is padding and a margin assigned to the element, the padding and margin will be contained within the containing element.