How to fit social media icons directly under the nav bar

Hi John,

currently your list items are display: inline-block so they go side by side.

What you want to do is make them display:block so they go on top of each other and then go back to display: inline-block when the screen gets wider.

You can do this like this:

.nav > li {
display: block;
}

@media (min-width: 768px) {
.nav > li {
display: inline-block;
}
}

So what this does is have them on top of each other at the beginning and then when the screen is 768px or wider it goes back to side by side.

Another point to make is that your 'ul' element has 40px padding to left hand side. This is something the browser does by default so if I were you I'd reset by doing this:

ul {
padding: 0;
}

One final point:

Your nav is 320px wide. I'd personally have it wider so your list items can fit on one line.

Any problems let me know.

Joe