This took me a while to debug, one div and one fieldset both are set to 100%, but in close examination they are off by a few pixels. Below is a stripped down example.

This is the menu bar, with some buttons



Some text

So, I was like, perhaps some of these jquery-ui classes gave margin values, so I manually set the margins to all zeros. I also then set all the border sizes to zeroes.

However, still off by two pixels…

I then went through all the css attributes in the chrome debugging tool, it turns out the following unheard of attributes are set by fieldset by default.

-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;

Apparently -webkit-margin-start and -webkit-margin-end will override the margin values… See more info here: http://css-infos.net/property/-webkit-margin-start

And in fact, I was off by 2 pixels on each side, haha.

So I explicitly set these two to zeroes, then yup, I got both the div and the fieldset aligned. I am happy! 😉