Trying to make responsive div horizontal but it stacks, please help in codepen

I’m on my second project making my portfolio and I’m trying to make a horizontal responsive menu, but it keeps stacking. Can anyone help me figure out how to make it horizontal? I know it can go horizontal by using “float:right;”, but I want to make my css responsive. I would greatly appreciate any help.
here is my code

iv id=“tab” class=“container”>

body{
background-color:blue;
}

#tab{
background-color:red;
height: 60px;

}
#menu{
background-color:green;
height: 30px;
width: 100px;
}
#menu2{
background-color:yellow;
height: 30px;
width: 100px;
}

#menu3{
background-color:purple;
height: 30px;
width: 100px;
}

Check out this video.
youtube bootstrap

Thanks, solved it…

What is your solution ?

I stopped using col-sm-6 to make it responsive and used flexbox instead.