Navigation menu is going to the next line (using custom css) since the font change in HUB

[MelissaMiracle1]

My navigation menu across the top in my hub site is going to a second line.  I am not sure where in the custom CSS I might be able to fix this - can I change the font to a smaller size?  Would prefer NOT to change the nav menu headings.  Here is my CSS:

.first-tier {
height: 120px;
margin-bottom: 0px;
background-color: #EDF0ED;
}

.first-tier .nav>li>a {
margin-top: 5px;
padding: 3px 6px;
color: #000;
}

.first-tier .nav>li>a:focus,
.first-tier .nav>li>a:hover {
background-color: #136fbf;
color: #EDF0ED;
}

.first-tier .site-logo img {
vertical-align: middle;
}

.first-tier h1 {
display: inline;
font-size: 25px;
}
.first-tier h2 {
display: inline;
font-size: 18px;
}
.second-tier {
margin-bottom: 0px;
background-color: #136fbf;
}

.site-header .navbar-header img {
vertical-align: middle;
height: 50px;

}

.header-container {
top: 80px;
margin: 0 auto;
max-width: 1440px;
position: absolute;
width: 100%;
transform: translateX(-50%);
left: 50%;
z-index: 10;
transition: max-width 250ms linear;
}

.header-container .navbar .container-fluid {
display: flex;
}

.header-container .navbar.navbar-default {
background-color: #EDF0ED;
border-color: transparent;
border-radius: 0;
}

.header-container .navbar.navbar-default .navbar-collapse.collapse {
display: flex;
flex: 1;
padding-right: 0;
}

.header-container .navbar.navbar-default .navbar-brand {
color: #EDF0ED;
height: auto;
padding: 1rem;
}

.header-container .navbar.navbar-default .navbar-brand-img {
display: inline-block;
}

.header-container .navbar.navbar-default .navbar-nav {
flex: 2;
align-items: center;
justify-content: center;
margin: auto;
float: none;
}

.header-container .navbar.navbar-default .navbar-nav>li {
float: none;
display: inline-block;
}

.header-container .navbar.navbar-default .navbar-nav>li>a {
background: transparent;
color: #333;
font-size: 15px;
transition: all 250ms linear;
}

.header-container .navbar.navbar-default .navbar-nav>li>a:focus,
.header-container .navbar.navbar-default .navbar-nav>li>a:hover {
background: #3276AE;
color: #EDF0ED;
}

.header-container .navbar.navbar-default .navbar-right {
margin-right: 0;
flex: 1;
text-align: right;
}

.is-sticky {
position: relative;
z-index: 10;
}

.is-sticky .header-container {
max-width: 100%;
}

@media screen and (max-width: 768px) {
.header-container .navbar-header {
width: 100%;
}
.header-container .navbar-default .navbar-toggle {
margin-top: 18px;
}
.header-container .navbar .container-fluid {
display: block;
}
.header-container .navbar.navbar-default .navbar-collapse.collapse {
overflow: hidden;
display: none;
}
.header-container .navbar.navbar-default .navbar-collapse.collapse.in {
display: block;
}
.header-container .navbar.navbar-default .navbar-nav {
display: inherit;
padding: 0 0 1rem 0;
}
.header-container .navbar.navbar-default .navbar-nav > li {
display: block;
}
}

/* Editor adjustment for absolute positioned header */
header ~ .body-editor section:first-child { padding-top: 100px;}

Here is what the menu looks like now:

[KlaraSchmitt · Accepted solution]

Hello,

If you want to change font-size, try doing it within the class .second-tier. That should control the links in the blue part of your header.