親要素のサイズが変更されたときにテキストが移動する

Question

divに、text-alignを使用して中央揃えされたh1タグがあります。 divはmargin：autoを使用して中央揃えされます。私はこのdivの幅を変更しているJQueryを持っていますが、このサイズ変更時に、テキストがちょっと右に移動します。これはまた、私はそれの下にあるメニューバー（中心に置かれている）でも起こります。これはJSFiddleからのコードです：

HTML

<div id="content"> 
    <div id="header"> 
     <h1>Title</h1> 
    </div> 
    <div> 
     <ul class="menu"> 
      <li class="menu"><a class="active" href="#">Text</a></li> 
      <li class="menu"><a    href="#">Text</a></li> 
      <li class="menu"><a    href="#">Text</a></li> 
      <li class="menu"><a    href="#">Text</a></li> 
      <li class="menu"><a    href="#">Text</a></li> 
     </ul> 
    </div> 
</div> 

jQueryの

$(document).ready(function() { 
    var div = $("div"); 
    div.fadeTo(0, 0); 
    div.fadeTo(1000, 1); 
    div.animate({width: '+=2%'}, 250); 
    div.animate({width: '-=2%'}, 500); 
}); 

は簡潔にするため、CSSがポストからコミットされているが、JSFiddle

であります

この原因は何ですか？どのように避けることができますか？ CSSには何も配置されていないものがあります。

JSFiddle：https://jsfiddle.net/5vtvzsgc/

Answer 1

ページ上のすべてのdivの幅を変更しているためです。この問題を解決するには、単にあなたの外側のdiv contentの幅を変更するので、この行を変更：これに

var div = $("div"); 

：

var div = $("#content");