How do I get my logo to align left, and links right?

Question

I'm new to css and trying to figure out how to get my logo on top of my nav links. I'd like my logo to be on the left with links on the right.

I've just added in some html here as well! My logo is also just getting really large and doesn't seem to work without having a display as flex and the content justified to space-between.

.logo {
    width: 240px;
    height: 120px;
    display: inline-block;
    float: left;
}

.logo:hover{
    transform: scale(1.4) rotate(180deg);
}

.navbar {
    display: inline-block;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 18px;
    align-items:center;
  
}

.nav_links:hover {
   color:#3f8b7b;
   text-decoration: underline;
   font-weight: 600;
}

.nav_links, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

li, a {
    display: inline;
    float: left;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
    margin-left: 24px;
    margin-top: 24px;
    margin-bottom: 36px;
    text-decoration: none;
    color: #191a1a;
}

    <header>
     <div class="hero">
     <div class="container"> 
    <nav class="navbar">
      <div class="logo"><img src="Logo/logo.svg" alt="vic logo"/>
              </div>
        <ul class="nav_links">
            <li class="active"> 
                <a href="index.html" class="nav_links">home</a>
                <li>
                 <a href="stills.html" class="nav_links">stills</a>
                </li>
                <li>
                   <a href="designs.html" class="nav_links">designs</a>
                </li>
            </ul>
            </nav>

I tried to follow along with a couple tutorials but it's not quite working.

Answer 1

I am not sure I understand the reasoning for flipping the logo 180º and scaling it the way you have, but in general, to get your logo on the left and your nav links on the right, you can follow these steps:

1. Wrap your logo and navigation into divs or another form of container that allows them to be styled.
2. Set the container's display property to "flex" and set justify-content to "space-between". (There are several ways to do this other than using flex, but this is a very straightforward solution.) Doing it this way will generally place the logo on the left and the nav links on the right.
3. At this point, you should be able to get rid of the fload properties from your logo and navbar, and you can probably remove the display property from the navigation; you won't need it since we're using flex.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px; /* this is an arbitrary number; adjust as needed */
  padding-bottom: 4px;
  font-size: 18px; /* You set this here but then set the link font-size to 24px? */
  font-family: Arial, Helvetica, sans-serif;
  color: #191a1a;
}

.logo {
  width: 240px;
  height: 120px;
}

.logo:hover{
  transform: scale(1.4) rotate(180deg);
}

.logo img {
  max-width: 100px;
}

.nav_links {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav_links li {
  margin-left: 24px;
}

.nav_links li:first-child {
  margin-left: 0;
}

li a {
  color: #191a1a;
  display: inline-block;
  text-decoration: none;
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  margin-bottom: 36px;
}

li a:hover {
  color: #3f8b7b;
  text-decoration: underline;
  font-weight: 600;
}

li.active a {
  color: #3f8b7b;
  font-weight: 600;
  text-decoration: underline;
}

  <nav class="navbar">
      <div class="logo">
        <img src="Logo/logo.svg" alt="vic logo"/>
      </div>
      <ul class="nav_links">
          <li class="active"> 
              <a href="index.html" class="nav_link">home</a>
          </li>
          <li>
           <a href="stills.html" class="nav_link">stills</a>
          </li>
          <li>
             <a href="designs.html" class="nav_link">designs</a>
          </li>
      </ul>
</nav>

I noticed that you also chose to use the same class name on the list items (.nav_links) as you chose for the unordered list. In general, you don't want to do that. Notice that my HTML above changes the name of the class applied to the links in the list items.

Let me know if you run into any issues or have any questions.