Hello bosses in the house. I have this navbar I'm working on. I realize that on zooming the browser to a certain level, the navbar no longer covers the whole width of the browser, and its content are flowing out of it.

Picture1: how it looks on normal view

Picture2; when I zoom it, the right edge doesn't cover the whole screen

Picture3: I notice same when I toggle device toolbar to a certain width.

Abeg how can I make it cover the whole screen.

@Qtguru @tensazangetsu20 and other bosses

Modified: Here is the code [url] https://codepen.io/Capt-jack14/pen/mdpXvor [/url]

You must be Mis using max width

You will build for various screen sizes.

Check out responsive web dev.

GREATIGBOMAN:
You must be Mis using max width

I didn't use max width. I've modified the post with a link to the code

LikeAking:
You will build for various screen sizes.

Check out responsive web dev.

OK thanks

Your code has no body tag, html tag and Head tag

GREATIGBOMAN:
Your code has no body tag, html tag and Head tag

he is using codepen so he don't need that

arabmoney14:
Hello bosses in the house. I have this navbar I'm working on. I realize that on zooming the browser to a certain level, the navbar no longer covers the whole width of the browser, and its content are flowing out of it.

Picture1: how it looks on normal view

Picture2; when I zoom it, the right edge doesn't cover the whole screen

Picture3: I notice same when I toggle device toolbar to a certain width.

Abeg how can I make it cover the whole screen.

@Qtguru @tensazangetsu20 and other bosses

Modified: Here is the code [url] https://codepen.io/Capt-jack14/pen/mdpXvor [/url]

notice it only happens on mobile platform.

so the idea is that you're using flex-box without flex-wrap
so when the screen is to small to accommodate the flex. it becomes too wide more than the screen and over stretch even more than it's parent element.
So to solve this issue you need not do something like

.navlist {
flex-wrap: wrap;
}

basically you need to add the above in devices with max-screen 600px and so on

stanliwise:

notice it only happens on mobile platform.

so the idea is that you're using flex-box without flex-wrap
so when the screen is to small to accommodate the flex. it becomes too wide more than the screen and over stretch even more than it's parent element.
So to solve this issue you need not do something like

.navlist {
flex-wrap: wrap;
}

basically you need to add the above in devices with max-screen 600px and so on

Thanks boss, will try this

Your header tag is overflowing and width is set to 100% by default, you can either adjust your content to fit the screen on that screen size or set a value above 100% you could also do overflow: auto; but I don't know why anyone would want a scrolling navbar

stanliwise:

notice it only happens on mobile platform.

so the idea is that you're using flex-box without flex-wrap
so when the screen is to small to accommodate the flex. it becomes too wide more than the screen and over stretch even more than it's parent element.
So to solve this issue you need not do something like

.navlist {
flex-wrap: wrap;
}

basically you need to add the above in devices with max-screen 600px and so on

This worked. Thanks a lot boss!

Thanks to everyone that contributed. Through your help, i've been able to solve the issue.

Thanks once again