jQuery collapsible Accordion animation behavior: content-panel is wider than accordion's container during expansion

Question

On my page, the accordion-content expands wider than the margin-settings vis-a-vis the accordion's #container DIV and then, after it's finished expanding, the accordion-content width is adjusted to fit within those margins. This behavior doesn't look as smooth as the demos on the jQuery page and I must be doing something wrong or neglecting some setting. Same behavior on Chrome, FF, Opera, and IE.

EDIT: the problem only occurs if one of the two panels is already expanded. If a panel is expanded, and the other panel header is clicked, the to-be-expanded panel is at first wider than it should be. But if both panels are shut (the accordion is collapsible) then when a panel is expanded it behaves properly -- the width is good during the expand.

Here is a working example: http://jsfiddle.net/reaF5/1/

I thought perhaps the margins should be applied in the changestart eventhandler rather than in my stylesheet:

  $("#accordion").accordion({autoHeight:false, collapsible:true,
     changestart: function(event, ui) {ui.newContent.css('marginLeft','1em'); ui.newContent.css('marginRight','1em');}
   });

No luck, though my code could have something wrong with it? I have also tried binding the accordion's resize event to the page resize, to no avail:

  $(window).resize(function(){
   $("#accordion").accordion("resize");
  });

I would be grateful for some guidance on how to keep the content panel within the margins during the animated expansion.

Thanks