not very good at css need fixes to match my old code - html

Question

I have been working on this game for a while and decided to change my navbars to just buttons and I'm having trouble finishing up matching my style i had.
old code fiddle : https://jsfiddle.net/tmanrocks999/L4hmpan1/38/
new code that i think is almost done : https://jsfiddle.net/tmanrocks999/yfcdqu5g/ ( can't get the last few things to work. not sure what the tab-container etc things need to say to make them work)
I basically want how my first fiddle looks on the 2nd one. its alot to post in here but i can post the css for both
old css:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 5px;
}
.nav_bar ul li a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover {
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover {
background: #ffffff;
color: #000000;
}
.main_container {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
starting of the new css that i will use once done because it works with buttons:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
/* remove border radius for the tab */
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
#exTab3 .nav-pills>li>a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-radius-topleft: 10px;
border-radius-topright: 10px;
width: 115px;
display: block;
text-align: center;
}
#exTab3 .tab-content {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
I expect my 2nd fiddle to match my first fiddle in css style. i figured out that navbars = a list of links so what i did find to work should work . Active tab should be white and other non active tabs blue. But my actual output is close to my old style but not exactly. If i could get some help with fixing my css id really appreciate it. been wanting this fix for a few months now.

Answer 1

You need to add below CSS to your code.
#exTab3 .nav-pills>li.active>a,
#exTab3 .nav-pills>li.active>a:hover,
#exTab3 .nav-pills>li.active>a:focus {
background-color: #fff !important;
}