Text bewegt sich, wenn das Elternelement in der Größe geändert wird

Question

Ich habe ein h1-Tag in einem div, das mit text-align zentriert ist. Das div wird mithilfe von margin: auto zentriert. Ich habe JQuery, das die Breite dieses div ändert, aber nach dieser Größenänderung bewegt sich der Text ein wenig nach rechts. Dies geschieht auch mit der (auch zentrierten) Menüleiste, die ich darunter habe. Dies ist der Code aus dem 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); 
}); 

Der Kürze halber wird die CSS von der Post verpflichtet, ist aber auf dem JSFiddle

Was verursacht das? Und wie kann es vermieden werden? Es gibt nichts im CSS, das die Breite oder Positionierung von irgendetwas unabhängig beeinflussen könnte.

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

Answer 1

Dies ist, weil Sie die Breite aller divs auf der Seite ändern. Um dies zu beheben einfach die Breite des äußeren div ändern content, so dass diese Zeile:

var div = $("div"); 

Um dies:

var div = $("#content");