When the page is zoomed in and out green and red box don’t move. However when zoomed in the blue box always overlaps the green box and when zoomed out seems to move further away from the green box. How do i fix that? and how do i also remove the extra white space on the right side of the page? any help is apperciated 
The problem is, you are using rigid fixed pixel sizes (height and width) with flex. That makes no sense at all, going against all the princples of fluid design and the use of flex within that.
If you must set a width, make it max-width, if you must set a height, make it min-height. Or to be more flexible, use relative units like em, rem or % to size things. Though the layout you show may lend itself more to grid than flex.
As Sam said you don’t want fixed heights and widths for a responsive design and certainly not with percentage margins added into the mix. Neither is your use of position:fixed any use to you here unless you were trying for a ‘dashboard’ effect where verey element has its own scrollbars and scrolls independently of the viewport.
In most cases you want the elements to grow with content and scroll with the viewport normally.
Also if you are expecting that browser zoom is some sort of responsive aid then that’s not what it is intended for. It merely zooms or shrinks the layout and is only useful for reading text that is too small or vice versa. It is not a way of checking that your site works on different browser widths and heights. The browser zoom is not a perfect tool and things will often break if zoomed too far. There is no such thing as half a pixel so some pixel elements get rounded up and some may get rounded down resulting in misalignment when zoomed. However the page should still be usable.
To check your design works on different viewport widths simply grab the edge of the browser window and make it smaller in height and width and then you will see what other people may see depending on their device and where they have their browser open. This is responsive design in that it works across the whole range of sizes without knowing anything about them.
Here is an old grid demo updated to match your design to show the basics of what you need.
(Click the ‘Edit on codepen’ link to open in a full window and see the 2 column layout rather than the one column small screen layout).
There are no fixed heights or widths except for the width on the side column although that could be made to flex also within a range if needed.
You can do similar using flex instead of grid but its slightly more complicated and needs the html rearranged a little. Grid is a better choice for that structure these days.
Note that when you are testing a layout don’t just use coloured boxes. Add enough dummy data into the page so that you can see what happens when content overflows. If you added content into your example then you would see that it all spills out and overlaps.
Lastly rather than posting a screenshot of your code please post the actual code so we can use your code to help you. Or better still just set up a free codepen account and you can share the actual code more easily and allow others to help quickly
gotchu. ill start making adjustments and see if it works. thank you!
I apperciate the response alot. still new to this but i will take this info and go ahead and make the adjustments now. thank you again.!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
