当我在其中添加“空格”时，如何确保文本保持在同一行 <li> 元件？

Question

I constantly find myself browsing SOF and have yet to post so here it is. I'm building a new website and am a relative beginner to CSS. I am struggling with a basic nav menu and just can't quite research how to solve a problem..

Here is my website and if you look under the 'Contact dropdown you'll see that the first list item is on 2 lines when I want it on only one like what you see under the 'Downloads' drop down.

In case anyone wants the code

.nav{
width:100%;
background-color: #0066B9;
font-family: verdana;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
max-height: 31px;
}
.nav ul{
top: 0;
width:960px;
margin:0 auto;
list-style: none;
padding-left: 0px;
display: inherit;
}
.nav li{
display: inline;
position: relative;
background-color: #003E64;
padding-top: 4px;
padding-bottom: 4px;
}
.nav ul li a{
color: white;
text-decoration: none;
padding: 10px;
line-height: 21px;
}
.nav ul li a:hover{
background-color: purple;
color: black;
padding-top: 4px;
padding-bottom: 4px;
}
.nav ul li ul{
display: none;
position: absolute;
margin: 0px;
background-color: #003E64;
width: auto;
}
.nav ul > li > ul{
position: absolute;
left: 0;
margin-top: 27px;
display: none;
padding-top: 10px;
overflow: hidden;
}
.nav ul li:hover > ul{
display: block;
padding-left: 6px;
}
.nav ul > li > ul > li{
position: relative;
display: block;
width: auto;
}
.nav ul > li > ul > li a{
padding: 10px;
}

Apologies in advance if I posted incorrectly. Not exactly sure what it's asking me to indent by 4 spaces.

Answer 1

Try using the white-space CSS property:

.nav li {
    ...
    white-space: nowrap;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space