Bizarre CSS Behaviour

MDN Learn
#1

Hi

All scripts on this site are linked to the same CCS sheet, which contains:

CSS

The HTML code I have a problem with is:

HTML

The ‘Existing Orders’ div & the ‘Test Div’ div, along with every other div on the site, center as intended but the 2 ‘itemsHeader’ divs do not:

Browser
Browser1427×281 14 KB

The 2nd ‘itemsHeader’ div is meant to be on this page - the 1st one I have copy & pasted from another page where it centers as expected.

The CSS for the the div is:

Div CSS

I have absolutely no idea why this this code is displaying as it is, any help wpould be gratefully received.

Thanks

#3

.itemsHeader really is in the middle. its child elements are on the left because you set the fixed width(style=“0 0 **px”) and the child elements are arranged on the left(justify-content:left; ); That’s what this style code means;

#4

Hi @panda

Thanks for your response - I get what you are saying but it doesn’t explain why the 1st ‘itemsHeader’ div centers as expected on another page.

Also, more weirdness - when I ran the script this morning, after adding some more code, I get this result:

Browser2
Browser21710×522 41.3 KB

The original ‘itemsHeader’ div plus 3 new ones (bold text &run through a foreach loop) all center but the ‘itemsList’ divs, which are identical to the ‘itemsHeader’ div apart from the font formatting remain to the left.

I subsequently removed the justify-content:left; from both ‘item’ divs but this made no difference, even after clearing the browser data, closing the browser, restarting it & reloading the site.

HTML code is now:

HTML2
HTML2799×1052 114 KB

So I’m no clearer about what’s going on, & still at a loss as to how to correct this.