html – Just how to maintain left and also right-hand divs in navbar on the very same row when you get to col-xs breakpoint in CSS flexbox?

I am applying a navbar for a site and also wish to maintain the logo design and also header on the left-hand side, and also the web links on the right-hand side. I am making use of CSS Flexbox to produce 2 divs and also put them on the very same row. I have a moms and dad div that stands for the navbar periods the size of the web page (size = 100%). I designate the “row” course to the navbar div and also col courses to the 2 youngster divs.

When I resize the web browser home window and also struck the xs breakpoint (size of 576 px), the best div relocates to the following row and also leaves great deals of extra room on the initial row after the header. Just how do I maintain the 2 divs on the very same row despite exactly how little the home window is?

I attempted making use of media inquiries and also having fun with extra padding and also margins however I can not eliminate the extra room.

I attempted transforming the justify-content characteristic from “space-between” (which will certainly press the web content on each side in the direction of completions) to “flex-start” so the web content can be pressed in the direction of each various other when the home window obtains smaller sized. That really did not function either.

Right here is my present HTML code:

<< div course=" row portalNavbar">>.
<< div course=" leftNav col-xs-6 col-sm-6 col-md-6 col-lg-6">>.
<< img src=" ...">
<> < h1>> CUSTOMER SITE<.
<.

<< div course=" rightNav col-xs-6 col-sm-6 col-md-6 col-lg-6">>.
<< div course=" navLink">
<> < a href="$ {reroute}" course=" navText icon-link icon-link-hover">>.
<< i course=" bi bi-icon_name bi-house"><> .
<.
<.
<< div course=" navLink">
<> < a href="$ {reroute}" course=" navText icon-link icon-link-hover">>.
Concerning United States.
<.
<.
<.
<.

CSS:

 portalNavbar {
history: rgb( 69, 85, 165);
size: 100%;
elevation: 70px;
display screen: flex;
justify-content: space-between;
align-items: facility;
}

. leftNav {
display screen: inline-flex;
justify-content: flex-start;
align-items: facility;
elevation: 100%;
}

. rightNav {
display screen: inline-flex;.
justify-content: flex-end;.
elevation: 100%;.
min-height: 100%;.
}

@media (min-width: 400px) and also (max-width: 600px) {
. portalNavbar {
justify-content: flex-start;.
display screen: inline-flex;.
}
}