Navigation Bar Issue: CSS

Hello, going through the Tea Cozy project on Codecademy to create a website using Box Model or Flexbox. I’ll be doing both eventually though.

The image displays my navigation menu to the right, which is on my header. I’m using the display, ‘inline-block’ so that each word displays next to each other. Although, as you see the words display vertically. I’ve probably missed something obvious but I can’t figure out what it is /:

If it’s any help, my CSS code for the navigation bar and the header, respectively are;

.header {
position: fixed;
height: 69px;
top: 0;
width: 100%;
border-bottom: 1px solid seashell;
background-color: black;
padding: 10px;
vertical-align: top;


.nav-bar {
list-style-type: none;
padding: 10px;
color: seashell;
float: right;
display: inline-block;
padding: 0;
margin: 0;

Any help is appreciated.

Thank you.

Is There ul and li tags in your header, because i think display: inline-block must set in ul tag.