Why is the content showing along side with navbar? Why can't it display after navbar?

Question

Image here

Hello I am creating a hero section but the info that I am writing is showing in the navbar. I want it to display under the navbar. I can't find the solution. Please help. I am not good at css

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
  margin: 0 25%;
  margin-top: 1%;
}

.nav nav {
  float: right;
}

.nav nav .links {
  display: flex;
  list-style: none;
}

.nav nav .links .link {
  margin: 0 20px;
  font-size: 1em;
  font-weight: 500;
}

<div class="container">
  <div class="nav">
    <nav>
      <ul class="links">
        <li class="link">Home</li>
        <li class="link">Project</li>
        <li class="link">About</li>
        <li class="link">Contact</li>
      </ul>
    </nav>
  </div>
</div>
<div class="container info2">
  <h1>Hello</h1>
</div>

I want hello to display beneath the navbar. When I try to give the margin to info2(hello) it affects the navbar too. I don't understand please help.

Answer 1

just remove your CSS class selector .nav nav { float : right; }

And in class .nav nav .links add padding: 0; justify-content: right;

(I removed the margin in class .containr for example)

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
}

.container {
/*  margin: 0 25%; */
  margin-top: 1%;
}

.nav nav .links {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: right;
}

.nav nav .links .link {
  margin: 0 20px;
  font-size: 1em;
  font-weight: 500;
}

<div class="container">
  <div class="nav">
    <nav>
      <ul class="links">
        <li class="link">Home</li>
        <li class="link">Project</li>
        <li class="link">About</li>
        <li class="link">Contact</li>
      </ul>
    </nav>
  </div>
</div>
<div class="container info2">
  <h1>Hello</h1>
</div>