JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h1>Site</h1>
  <div class="logo-direita">
    <img src="https://i.ibb.co/hcnbySh/kurumin-ok.png" alt="Kurumin_ok">
  </div>
</header>

<nav>
  <!-- Entendo que cada item do menu é um link, que ao ser clicado leva a outra página, então por que não usar links? -->
  <a id="botao1" href="home.html">Home</a>
  <a id="botao2" href="ebooks.html">Ebooks</a>
  <a id="botao3" href="revistas.html">Revistas</a>
  <a id="botao4" href="codigos.html">Códigos</a>
  <a id="botao5" href="contato.html">Contato</a>
</nav>

<article>
  <section class="esquerda"></section>
  <section class="centro"><br>Brasil</section>
  <section class="direita"></section>
</article>

CSS

html {
  height: 1024px;
  width: 768px;
  margin: auto;
}

header {
  height: 130px;
  width: 100%;
  background-color: black;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 10px;
}

header h1 {
  padding: 40px;
  font-size: 30px;
  color: white;
  text-align: center;
}

.logo-direita {
  text-align: right;
  padding-bottom: 500px;
  margin-top: -120px;
  margin-bottom: 30px;
  margin-right: 30px;
}

nav {
  height: 35px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

nav a {
  line-height: 35px; /* use o mesmo valor do height, assim o texto centraliza verticalmente */
  height: 35px;
  width: 20%; /* são 5 itens, então cada um ocupa 20%, assim eles ocuparão todo o espaço */
  background-color: blue;
  color: white;
  text-decoration: none;
  text-align: center;
}

nav a:hover {
  background-color: white;
  color: black;
}

article {
  height: 859px;
  width: 100%;
  background-color: gray;
  text-align: center;
}

.esquerda {
  height: 859px;
  width: 25%;
  background-color: green;
  float: left;
}

.centro {
  height: 859px;
  width: 50%;
  background-color: white;
  float: left;
}

.direita {
  height: 859px;
  width: 25%;
  background-color: yellow;
  float: left;
}