ryanrogers1

Hi there,

I had a very similar issue with the header image and menu shifting slightly to the right in Twenty Ten. After digging, I discovered the misalignment isn’t caused by the theme itself, but by a plugin injecting a global CSS rule:

* { box-sizing: border-box; }

That rule resets the box model for all elements site-wide, which breaks the layout math in Twenty Ten (the theme expects content-box by default). It causes wrappers, images, and menus to shift because padding/width calculations change.

Here’s what I found:

1. The plugin Document Embedder (by bPlugins) is injecting that global reset via an inline stylesheet (id="bpldl-document-library-style-inline-css").
2. I couldn’t find any UI setting in the plugin’s official documentation to disable that reset.
3. It’s considered bad practice for a plugin to inject global styles like that, because it can break theme layouts unexpectedly. More maintainable approaches scope CSS rules to their own containers (e.g. .plugin-container * { … }) instead of using * { … }.

Fix I used (works while keeping the plugin active):
Add the following CSS (via Additional CSS or child theme) to override the plugin’s global reset just for the Twenty Ten layout parts:

/* Restore Twenty Ten’s default box model for its layout frames */
#wrapper,
#header,
#masthead,
#branding,
#access,
#main,
#container,
#content,
#primary,
#secondary,
#colophon,
#footer,
#site-title,
#site-description,
#access .menu-header,
#access .menu,
#access ul,
#access li,
#branding img {
  box-sizing: content-box !important;
}

/* Keep plugin’s UI using border-box inside its own container */
.bplDl-container,
.bplDl-container * {
  box-sizing: border-box !important;
}

With that in place, my header image and menu realigned perfectly without disabling the plugin.

If someone else is experiencing this, check whether their site has a plugin injecting a global box-sizing reset. Deactivating that or containing it is usually the key.