Keeping Tabs on Two Lines on all desktop sizes - flex basis

Site URL: https://thisisdoer.com/digital

Heyo!

site: thisisdoer.com/digital

I have some tabs on my site that currently stack on two lines. This on my external monitor that is 27 inches. This is the ideal state until the tablet breakpoint.

When the screen resizes to a smaller resolution on a desktop (say a 15inch screen), they break into three lines and become a bit incoherent. 

I've attempted to use flex-basis to make them remain consistently stay on two lines instead of breaking into three. but have not been able to do so.

On tablets and mobile they behave how I'd hoped so I'm not sure what I have bungled.

Any insight would be really great if you have any! 

Do bumps work? 👀

Try this

/* Our process */
@media screen and (max-width:1350px) {
.sqpl-tab-controls {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
}
.sqpl-tab-controls>div {
    width: 50%;
    padding-left: 0;
    padding-right: 0;
}}