I’ve been trying : text-align:center, align-items:center.. In this code, I use BootStrap, but I also tried to over-code it via css- nothing helps. I’d really thank you for help.

    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML Final Task</title>
        <!-- CSS only -->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
          crossorigin="anonymous"
        />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        />
      </head>
      <body>
        <div class="nav-container-wrap">
          <div class="nav container py-3 justify-content-between text-center">
            <div class="left-box d-flex gap-5">
              <div class="nav-item"><h3>Adantrip</h3></div>
              <div class="nav-item"><p>Hotels</p></div>
              <div class="nav-item"><p>Rooms</p></div>
              <div class="nav-item"><p>Flights</p></div>
              <div class="nav-item"><p>Cars</p></div>
              <div class="nav-item"><p>Experiences</p></div>
            </div>
            <div class="right-box d-flex gap-5">
              <div class="nav-item">USD</div>
              <div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
              <div class="nav-item">
                <i class="fa-solid fa-user"></i> My Account
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

Robert Mo is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

There is nothing wrong with your code. Some Bootstrap default styles, same as margin-bottom in some tags, affect your code.

Let’s make it simple and see the difference then correct it. In this sample, I’m gonna use pure CSS. Remove Bootstrap from your code temporarily and then add these styles:

.nav{display:flex;justify-content:space-between}
.left-box,
.right-box{display:flex;align-items:center;gap: 0.5rem;}

The use of the HTML <p> and <h1> tags are throwing off the Bootstrap layout because of their default attributes. Rather than fight with them, use the classes that Bootstrap provides. align-items-center on your flex containers and the responsive h1 class on the item you want for your header.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Final Task</title>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>

<body>
  <div class="nav-container-wrap">
    <div class="nav container py-3 justify-content-between align-items-center text-center ">
      <div class="left-box d-flex align-items-center text-center gap-5">
        <div class="nav-item h1">Adantrip</div>
        <div class="nav-item">Hotels</div>
        <div class="nav-item">Rooms</div>
        <div class="nav-item">Flights</div>
        <div class="nav-item">Cars</div>
        <div class="nav-item">Experiences</div>
      </div>
      <div class="right-box d-flex gap-5">
        <div class="nav-item">USD</div>
        <div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
        <div class="nav-item">
          <i class="fa-solid fa-user"></i> My Account
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.