Product Landing Page - Alignment Question

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Trying to get the Nav bar on the same line as the logo. Thanks

**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/93.0.4577.82 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

If you’d like to use flexbox to accomplish this with your code as it stands, you’ll have to target your <header>, since it wraps both the logo and the nav. However, and maybe my eyes are playing tricks on me, it seems you’re closing your .container div before you close your <header>, even though you open your <header> after you open your .container.

3

HI, thanks for the response. I made the changes you suggested. I’m still learning about alignment, etc so if you help with how to get the logo and nav bar lined up and the nav bar to the right I would appreciate it. Also, if you have any suggestions on learning about alignment that would be appreciated as well.

Joe

4

Say you have an element (We’ll use a div in this example, even though you targeted the header - both are block-level HTML elements) and you have two main elements contained by it. Your div will have a class container and the two elements contained by it will have classes site-logo and nav-links respectively. Let the set-up look like this:

<div class="container">
    <div class="site-logo">
        <img src="https://my-images.com/site-logo.jpg" alt="My Company Logo" />
    </div>
    <div class="nav-links">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>

For the container, we’ll use three properties to achieve the following three results:

  • The site logo and the nav links are displayed horizontally and not vertically,
  • the site logo is on the far left, and the nav links are on the far right, and
  • both main elements are aligned.

First, apply the display property and give it a value of flex. By default, flex arranges elements row-wise.

.container {
    display: flex;
}

Next, space the elements apart so that they are on the extreme ends of the container.

.container {
    ...
    justify-content: space-between;
}

Finally, for alignment, use the align-items property.

.container {
    
    ...
    align-items: center;
}

Altogether, it should look like this:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

In your case, the logo image is square with a lot more white space on the top and bottom of the graphic and text than on the sides. I would resize the photo height-wise if you want to use flexbox as demonstrated above. Otherwise, the vertical alignment of the nav links will be with the center of your oversized image, which will make things look awkward.

To move the site logo in from the left and the nav links from the right, you could use either the margin property of each or the padding property of the container.
Also, don’t forget that I targeted a div with the class container; it’s fine to target the header element in your case.

There’s a lot out there about alignment of elments, and MDN Docs are the best source of info, IMO.

To get started, check out this page:

1 Like
5

Thanks for your help.

1 Like
6

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