Technical Documentation Page - Need assistance on a css component

Currently I am trying to make my #homepage image (the huawei p30 pro logo) not overlap other contents when

I shrink the window size. I would like to have it stop by the scroll bar while its shrinking. But right now, it only shrink in size. It keeps overlapping my scroll side nav bar. I want it to be like my header where the input search box when window size is shrinked, stops right beside the word “documentation”. It doesn’t overlap.

Been going at this for almost an hours now changing code around…not working :sob:

Below is my codepen:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

Delete everything in your #homepage css. Your side nav width is 18.75rem with a fixed position. So, all you need to add to #homepage is a margin left of 18.75rem. Then it will stay out of your side nav.

It fixed the overlaping problem, however now the image won’t stay in the center though.
Especially when i change the screen size ><.

I’m not sure what you mean? It shrinks and grows between the left nav and right edge of the screen when I resize the width. If you mean horizontally you could add back position: fixed; top: 50%;.

Or using a top margin or padding might be better depending on what your ultimate design goal is.

Hi :slight_smile:
I figured it out.
Like you mentioned, I just played around with the padding to get it centered
in the container!

Thank you