Need help aligning Nav links side by side

HTML-CSS
1

Tell us what’s happening:
So I’m struggling making my nav bar links be side by side. Here’s the link to my code

Your code so far
https://codepen.io/richpatt12/pen/xxOqROe

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Hello rpatt!

One thing I would suggest before setting your link to the same line is to create an opening and closing unordered list tag, but a quick fix to this is to have your <li></li> tags be displayed inline.

For example:

li{
    display: inline;
}

And that should do the trick!

  • Cheers
1 Like
3

Hey @rpatt!

I would suggest using flex box because that is one of the user story requirements. You could try this.

HTML

<nav id="nav-bar">
  <a class="nav-link" href="#About-Us">About Us</a>
  <a class="nav-link" href="#Featured-Drinks">Prices</a>
  <a class="nav-link" href="#News-Letter">News-Letter</a>
</nav>

CSS

#nav-bar{
  position: fixed;
  display: flex;
}

.nav-link{
   padding: 5px;
}

Hope that helps!

Happy coding!

1 Like
4

Hi @rpatt, I know this isn’t within the scope of your question but please,

  • You have elements out of order. Everything the browser displays belong within the body element. Review this for an understanding of the HTML boilerplate tags.
  • As an aside, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
1 Like
5

you are right, I just wrote so much I confused myself I guess. I will organize it now.

1 Like
6