width задает ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.
По-умолчанию, при width:auto блок занимает всю ширину родительского блока. При увеличении внутренних отступов ширина содержимого автоматически уменьшается, а общая ширина остается равной ширине родителя.
При width:100% ширина содержимого блока равна ширине родительского блока. При увеличении внутренних отступов или рамки, общая ширина становится больше ширины родителя!
Для удобства ширину лучше задавать внешнему элементу (т.к. все вложенные будут той же ширины), а высоту самому глубокому, т.к. он растянет по высоте всех своих родителей.
<div class="block1">
<div class="block2"></div>
</div>
.block1 { width: 500px; }
.block2 { height: 300px; }