В каких случаях надо использовать width:100% вместо width:auto?
width: auto; - позволяет браузеру самому рассчитать ширину элемента.width: 100%; - заставит браузер растянуть элемент на 100% ширины родителя.
Например для элемента div правила width: auto; и width: 100%; будут эквивалентны, т.к. по умолчанию браузер обязан растягивать блочные элементы на всю ширину родителя (если они в потоке конечно же).
Представим теперь, что у нас есть картинка (img) размером 100 на 100 пикселей. Если мы скажем ей width: auto;, то она так и останется шириной 100 пикселей. А вот если мы скажем ей width: 100%;, то она растянется на всю доступную ей ширину.
Вот когда нам нужно чтобы какой-то элемент занимал всю доступную ему ширину, и когда по умолчанию он этого делать не умеет, вот тогда нам необходимо ему явно сказать width: 100%;.
Не все элементы занимают по умолчанию всю область. Например элементы с display: table, display: inline-block или с position: fixed, position: absolute.
Кроме того можно выбрать как именно складывать внутренние отступы, в этом вам поможет box-sizing