Why does page size in Google-Chrome-Inspect picture show width=375px, BUT the Class=page and ID=page BlueHighlight Rectangle is visually a width=1/2 375px, NOT 375??? (I think it should show entire device-screen width as BLUE)
I am looking for Best Practices on setting Container and Parent Container WIDTH values. I ASSUME that the Outer DIV Widths (eg the GP ID=page and CLASS=page) should be set to 100% Device-Screen-Width, and all MY custom Child DIV-Widths set to percentages of that FULL WIDTH PARENT ???????
As for setting widths for specific class selectors, avoid using values that are more than 100%.
It’ll affect how the layout looks especially when you use margins and transformations. I’ve checked your site and found that you have CSS codes that use 220%, and this will surely cause things to look weird.
As for images having half the width of their containers, it’s most likely due to it having a set width of 50% or its display size used coincidentally looks like half the container width.
A wise man once said:
"Have you cleared your cache?"