Logo and Nav in one line

Hi guys, I am stuck at on the navigation bar. (Project Junction). I want my logo and the navigation in one single line. Does anybody know how to solve this?


html, body {
margin: 0;
padding: 0;
font-family: ‘Merriweather’, serif;

body {
background: url(https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

.container {

/* Header */
.header {
padding: 10px 0;
background: rgba(0,0,0,.5);

.nav {
display: inline;

.nav li {
.logo {
width: 20px;

/* Jumbotron */
.jumbotron {
position: relative;
top: 50px;
text-shadow: 0 2px 3px rgba(0,0,0,.4);

/* Supporting */
.supporting {
margin-top: 40px;
text-shadow: 0 2px 3px rgba(0,0,0,.4);

Hey Ben,

Would you mind posting your HTML code, too?
You’ll need to format it so it’s visible :slight_smile:

change the .nav display: inline; to display: inline-block; I was having the same issue.

1 Like

I hope making the logo to become part of the list is acceptable :hushed:

<ul class="nav"> <li><img class="logo" src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" /></li>

I put both logo and nav into inline-block. This allowed me to adjust the margin to fit the logo and the navigation link vertically aligned. I floated the logo to the left to have them all aligned in one line.

.logo {
width: 30px;
height: 30px;
margin: 10px;
display: inline-block;

.nav {
display: inline-block;

1 Like