自動幅と100％幅の違い
回答:
幅自動
divやpのようなブロックレベル要素の初期幅はautoです。これにより、含まれているブロック内の使用可能なすべての水平スペースを占めるように拡張されます。水平パディングまたは境界線がある場合、それらの幅は要素の合計幅に追加されません。
幅100％
一方、width：100％を指定すると、要素の合計幅は、要素を含むブロックの100％に水平マージン、パディング、境界線を加えたものになります（box-sizing：border-boxを使用した場合を除く）。合計幅の計算方法を変更するために、マージンのみが100％に追加されます）。これはあなたが望むものかもしれませんが、おそらくそうではありません。
違いを視覚化するには、次の図を参照してください。
width: auto：動作する方法stackoverflow.com/questions/28353625/...
autoと同じことをfill-available
width: auto;マージン、パディング、またはボーダーから追加のスペースが追加された場合、エレメントは親コンテナーと同じ幅を維持するように可能な限り努力します。width: 100%;要素を親コンテナと同じ幅にします。親に関係なく、要素のサイズに余分なスペースが追加されます。これは通常問題を引き起こします。
widthの値がautoである限り、要素はコンテナよりも広くなることなく水平マージン、パディング、およびボーダーを持つことができます（もちろん、margin-left + border-left-width + padding-left + padding-rightの合計を除く） + border-right-width + margin-rightがコンテナーよりも大きい）。コンテンツボックスの幅は、コンテナの幅からマージン、パディング、ボーダーを差し引いたときの残りになります。
一方、width：100％を指定すると、要素の合計幅は、要素を含むブロックの100％に水平マージン、パディング、境界線を加えたものになります（box-sizing：border-boxを使用した場合を除く）。合計幅の計算方法を変更するために、マージンのみが100％に追加されます）。これはあなたが望むものかもしれませんが、おそらくそうではありません。
ソース：
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
divやpのようなブロックレベル要素の初期幅はautoです。
明示的に指定された幅を元に戻すには、width：autoを使用します。
width：100％を指定した場合、要素の合計幅は、要素を含むブロックの100％に水平マージン、パディング、境界線を加えたものになります。
したがって、次にブロックレベル要素の幅を100％に設定して、使用可能なすべての幅を占めるようにした場合は、本当に自動に設定することを検討してください。
幅100％：100％で コンテンツを作成します。マージン、ボーダー、パディングがこの幅に追加され、これらのいずれかが追加されると要素がオーバーフローします。
幅自動： マージン、ボーダー、パディングを含む利用可能なスペースに要素を合わせます。マージン+パディング+ボーダーを調整した後に残っているスペースは、幅/高さとして使用できます。
幅100％+ボックスのサイズ：境界ボックス： 境界、パディングを含む利用可能なスペースに要素を合わせます（マージンはコンテナーをオーバーフローさせます）。
幅の使用：自動; +表示：インラインブロック; CSSで素晴らしい効果をもたらします。
width : auto;
display: inline-block;