Help aligning elements on a top navigation bar

Hi, I just finished all the lessons from the HTML, CSS, Applied Visual Design and Applied Accesssibility and decided to try and make a mock freeCodeCamp since I’m afraid I won’t absorb all the info if I don’t practice it a little. I’ll resume the lessons and start Responsive Web Design Principles after this exercise.

Right now I’m having trouble with the top navigation bar. I can’t vertically align the search space at the left side and I can’t fit my ul at the right side. I’ve been doing this all morning but even after some serious google-fu I couldn’t make it :frowning:

Here’s the code at codepen: https://codepen.io/tiagomuramoto/pen/PoqqBvN

Where exactly do you want to place the search space?

Hi and welcome to the forum! :slight_smile: I can see that you’re using the float property for positioning the elements. I’d suggest trying the flexbox approach - it’s way more intuitive, perfect for navigation bars, and it’ll give you much more control over where your elements are within your navbar. FCC has a whole section on flexbox, so you could go over that one more time if you need to refresh your memory on the syntax and the way it works. So, my advice - give it a shot, and let us know if you need any help along the way :blush:

1 Like

Oh, ok then. I haven’t done the flexbox section yet, so I’ll give it a try. Thanks!!

1 Like