Landing page project question

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hi. Can someone help me out with an issue I am having with my project? I am trying to align the navigation tabs at the top of the page to the right hand side, while still having space between the links. You can look at the code example for the project. I am trying to replicate that format.

Here is a link to my codepen:

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

You could give the #navigation a margin-left:auto; to move it over. I assume you want the logo to stay on the left

3

You can also try flex: 1 0 auto; on your logo id which will make that div grow and push the nav over to the right.

I would also recommend you move the header styling into the CSS so you’re not working between inline styles in your HTML and other things in your CSS to keep it consistent.

4

This solved the issue. For some reason I thought I had already tried this. I think I set the left margin for the wrong element. Thanks.

5

This did not work. Could you explain what the flex shorthand values mean, though? Thanks.

6

I’ve run into another issue. I tried to make the header position fixed, but that disabled the auto setting of the left margin of the navigation links.

7

Not sure what happened there, worked when I tried it earlier but you already have a good alternative solution :slightly_smiling_face:.

The flex property is shorthand for flex-grow, flex-shrink and flex-basis.

So flex-grow above 0 (which is the default) allows child items in a flex-box container to expand to take up more space. Whereas flex-shrink is used for how much they can contract. flex-basis is the initial size of something.

With my previous suggestion the idea was you’d want the logo div to take up as much space as possible from left to right (which pushes the nav to to right) and the nav to take up the remaining space. You wouldn’t want the logo’s div to shrink so as to always push the nav over to the right. You’d size the logo itself via the div you created for it.

Check out these links:

I found them really useful to understanding flex better.

Try using align-items: center; on your header element to center the nav text with your logo.

8

Instead of using margins, which can get messy, flex has an in-built property to separate elements left and right, called justify-content:

#header {
  width:100%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content:space-between;
}
9

Thanks for the links. I will check them out. align-items: center worked.

10

Small point but if you look just after your image div you will see that you have a div then a nav inside it but the nav is outside the same div at the other end . Clearing these things up may help things to work a little

11

Thanks. I missed that. That was helpful.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.