I am new to Web Development and React (and fairly amateur at CSS), so there must be some fundamental issue with my understanding of how flex works.

With reference to this codesandbox, the website that I am designing (for upskilling myself) seems to have (for the lack of a better word) some kind of 'shunt' in the Home Page. To elaborate, keep a close watch on the navbar on top. As soon as you click on 'About', the whole page seems to move a little to the right. Only the home page is being affected in this manner.

I have tried figuring out the issue on my own using the Browser's handy 'inspect tools'. Came to the following conclusions.

• It seems that the Home page has the width of 1519px whereas all other pages have the size 1536px. I am unable to understand why there is a difference of 15px at all.
• Trying to isolate the issue (by removing all elements and adding them back one-by-one to see which one is erroneous), I realised this 'shunt' is being caused whenever I place a flex element inside another flex element. Thanks to other stackoverflow answers, I found that the dimensions of a flex element depend upon the parent (which in turn is another flex element with ambiguous sizing properties).

Issue

Even when I resolve the above mentioned problem, there still remains the "latest-post-card" element which impacts the Home Page orientation. Further, when I remove the height property for the "latest-post-card" everything falls right into place, perfectly, just the way I want it to appear, save for the fact that the height of this card is variable. For the sake of consistency, I would like this card's height to be fixed (as I will keep updating the contents of this card dynamically through the backend).

Requesting fellow developers to shed light on the issue here; would appreciate if anyone can point out what the root of the problem is and how I can remedy it.

CodePudding user response：

What you're referring to as a "shunt" is caused by the other pages taking up less height and therefore not needing the scrollbar. When the scrollbar disappears, the page basically expands by the width of the scrollbar and therefore the content jumps slightly to the right.