I need help with positioning my nav with Flex Boxes

Get Help CSS
#1

Hey I need some kind person to help me with my navigation bar (very basic).

What I want to do:

  1. Center my logo and list items vertically
  2. Have my logo on the left side
  3. Have my list items on the right side
  4. Use Flexboxes

No matter what I do I can’t get this to work. I can get them centered vertically on one side but not separate them.

I tried to do it with float but it doesn’t work when I have display:flex I believe…

Here is what my HTML code looks like:

<nav class="navigation">
      <img class="logo" src="...">
      <ul>
          <li class="move-list"><a href="#">Link1</a></li>
          <li class="move-list"><a href="#">Link2</a></li>
          <li class="move-list"><a href="#">Link3</a></li>
      </ul>
    </nav>

Here is what my CSS code looks like:

.navigation {
    width: 100%;
    height: 100px;
    background-color: orange;
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}

.logo {
    height: 70px;
    padding-left: 20px;
}

.navigation li {
    display: inline; 
}

.navigation ul {
}

codeacademy
codeacademy1662×156 10.5 KB

I have the ‘.navigation ul’ there because I think I maybe should use it? but I don’t know.

Anyways I would appreciate it a lot if someone could help me out with this! <3

Thanks in advance
/Hugo

#2

Hi there,
Here are some little adjustments that might help.

.navigation {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background-color: orange;
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 50px;
    width: 50px;
}

.logo, 
.navigation ul {
  padding: 0 2em;
}

.navigation li {
    display: inline-block;
    margin-left: 20px;
}

Let me know if it helps.
Happy Coding !

1 Like
#3

justify-content: space-between; was just what I needed. Thank you so much!