Nav element alignment and float/position questions

Question

Good night.

I’m creating a Nav that contains an H1 on the left as logo and a ul on the right and I need to align the two to the center vertically, I’ve tried everything I know and it’s no use.

Then in main you will have two menus, one on the left and one on the direct but they are also not aligned.

I’m a beginner and I’m creating this page as a way to test my knowledge so far.

PS: I also didn’t understand how to put the css correctly here and on the wiki there is nothing very specific. I’ll put an image of the page layout.

I accept other feedback and thank you for your help.

HTML and CS

/* Estilos gerais da página */

body {
  background-color: #ebebeb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 120%;
  line-height: 1.5;
}

header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

aside {
  float: right;
  clear: right;
}

p {
  width: 220px;
  height: 120px;
  background-color: white;
  display: inline-block;
  text-align: justify;
}

li {
  text-decoration: none;
  display: inline-block;
  padding-left: 20px;
}

a {
  color: white;
  text-decoration: none;
}

ul {
  text-align: right;
  margin: 0;
  float: right;
  vertical-align: middle;
}

header {
  background-color: #ff5757;
  height: 8%;
}

h1 {
  font-family: "Faustina", serif;
  font-size: 48px;
  color: white;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
}

h2 {
  margin-top: 12%;
}

h3 {
  margin-bottom: 0;
}

h2,
h3 {
  color: #ff5757;
}

footer a {
  color: #ff914d;
}


/* classes */

.container {
  width: 70%;
  margin: 0 auto;
}

.bottom-footer {
  width: 100%;
  height: 50px;
  clear: both;
  background-color: #ff5757;
  margin-top: 50px;
}

.tags {
  color: #ff5757;
}

.label {
  color: #38b6ff;
}

.main-footer {
  color: #ff914d;
}


/* ids */

<header>
  <nav class="container">
    <!-- Logo e menu de navegação -->
    <h1>CF</h1>
    <ul>
      <li><a href="#">receitas</a></li>
      <li><a href="#">dicas</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">eventos</a></li>
      <li><a href="#">login</a></li>
    </ul>
  </nav>
</header>

<main class="container">
  <h2>Receitas mais votadas da semana</h2>
  <div>
    <h3>Macarrão bolonhesa</h3>
    <img src="macarrao.jfif" alt="Macarrão bolonhesa" height="220" width="220">
    <p>Lorem ipsum dolor sit amet dalar restrict du so</br>
      <i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
    </p>
    <footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
  </div>

  <div>
    <h3>Macarrão bolonhesa</h3>
    <img src="macarrao.jfif" alt="Macarrão bolonhesa" height="220" width="220">
    <p>Lorem ipsum dolor sit amet dalar restrict du so
      </br>
      <i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
    </p>
    <footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
  </div>

  <div>
    <h3>Macarrão bolonhesa</h3>
    <img src="macarrao.jfif" alt="Macarrão bolonhesa" height="220" width="220">
    <p>Lorem ipsum dolor sit amet dalar restrict du so
      </br>
      <i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
    </p>
    <footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
  </div>

  <aside>
    <h2>Destaques</h2>
    <div>
      <h3>Enchilada mexicana</h3>
      <img src="enrolado.jfif" alt="Macarrão bolonhesa" height="220" width="220">
      <p>Lorem ipsum dolor sit amet dalar restrict du so
        </br>
        <i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
      </p>

      <footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
    </div>

    <div>
      <h3>Enchilada mexicana</h3>
      <img src="enrolado.jfif" alt="Macarrão bolonhesa" height="220" width="220">
      <p>Lorem ipsum dolor sit amet dalar restrict du so
        </br>
        <i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
      </p>
      <footer class="main-footer">Tags: <a href="#">enrolado</a>, <a href="#">comida mexicana</a></footer>
    </div>
  </aside>
</main>

<footer class="bottom-footer">
  <div class="container">
    &copy; CozinhaFácil - 2019
    <ul>
      <li><a href="#"><i class="material-icons">tag_faces</i></a></li>
      <li><a href="#"><i class="material-icons">photo_camera</i></a></li>
      <li><a href="#"><i class="material-icons">notifications</i></a></li>
    </ul>
  </div>
</footer>

Answer 1

To solve the problem of header just use display:flex. Follow an example:

.container {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; 
}

header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom: 20px;
}

What I did was line up the header using display: flex and then I put a padding in the header to look more beautiful.

Now just use this base to align the bottom part as well. Tip: use different class names in header and in the body from the bottom.

Follow down the result of header:

NOTE: Search on display flex, is very practical.