[FIXED] How can i put the <hr> closer with the content in header?

Issue

I want to put the <hr closer to the content in the header. I try to use position-absolute but the

---

disappears. This is my first project with bootstrap.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!--Body -->
<header class="header row">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
    <div class="col-10 row">
      <h2 class="col-9 px-0 text-primary d-flex align-items-center">CHƯƠNG TRÌNH REBATE</h2>
      <div class="col-3 px-0">
        <div class="float-end d-flex justify-content-between">
          <i class="fa fa-bell me-lg-2 d-flex align-items-center"></i>
          <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
              <img class="rounded-circle " src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
              <span class="d-none d-lg-inline-flex text-primary">TuNTC23</span>
            </a>
            <div class="dropdown-menu bg-transparent border-0">
              <a href="#" class="dropdown-item">My Profile</a>
              <a href="#" class="dropdown-item">Settings</a>
              <a href="#" class="dropdown-item">Log Out</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr style="height:1px;color:#1968B2;">
</header>

Solution

<hr style="height:1px;color:#1968B2; margin-top: -4px">

you can adjust the margin top according to your usage

Answered By - buzz

Answer Checked By - Timothy Miller (PHPFixing Admin)