下面，我分享了我的代码。我面临的问题是如何使导航栏响应。当我放大或缩小时，我希望一切都保持视觉吸引力;但是，某些元素会出现错位，特别是导航栏品牌（它没有保持与导航栏左侧对齐）和右上角的蓝色框（放大时其宽度会变得太大）。
我想实现一个类似于Bootstrap的导航栏的响应式设计，当缩小时，内容保持在原位，当放大时，内容更加紧密。你能帮我修改我的代码来实现这一点吗？
这是一个简单的例子。https://codeply.com/v/iTRyE4xanM
下面是我的HTML代码使用bootstrap

<nav class="navbar custom-navbar navbar-expand-lg bd-nav">
      <div class="nav-blue-bar">
        <p class="nav-blue-bar-content">
          <i class="fa-solid fa-square-phone"></i> &nbsp; 0000-111-2222 &nbsp;
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <i class="fa-solid fa-envelope" style="color: #ffffff"></i>
          Studebt@gmail.com
        </p>
        <p class="nav-blue-bar-content-right">
          We are now taking intakes for mat, Limited seats
        </p>
      </div>
      <div class="container">
        <a class="navbar-brand" href="#">Your Brand</a>
        <hr class="line-1" />
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse navbar-center" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Courses</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Univeristies</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Gallery</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

下面是我的CSS

body {
  max-width: 1920px;
  margin: 0 auto;
  min-width: 1000px;
}

.nav-blue-bar {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  width: 90%;
  left: 266px;
  height: 35px;
  background-color: #192f59;
  clip-path: polygon(0% 0%, 100% 0%, 980% 100%, 3% 100%);
}

.nav-blue-bar-content {
  position: absolute;
  top: 5px;
  left: 100px;
  color: #ffffff;
  margin: 0;
  font-size: 14px;
}

.nav-blue-bar-content-right {
  position: absolute;
  top: 5px;
  right: 20%;
  color: #ffffff;
  margin: 0;
  font-size: 14px;
}

.custom-navbar {
  background-color: #f4f5f7;
  min-height: 100px;
  overflow: hidden;
  max-width: 100vw;
}

.navbar-brand {
  font-size: 34px;

  font-weight: bold;
  color: #192f59;
  margin-left: 0%;
}

.nav-link {
  font-size: 18px;
  color: #000000;
}

.navbar-center {
  display: flex;
  justify-content: center;
  padding-right: 15%;
}

.nav-item {
  padding-right: 60px;
  padding-top: 35px;
}

.line-1 {
  position: relative;
  width: 10%;
  height: 0px;
  left: -36px;
  top: 10%;
  opacity: 1;
  border: 1px solid;
  border-color: #192f59;
  transform: rotate(116.03deg);
}

我希望内容在放大时保持在其位置。导航条应该和hr元素一样向左对齐。This is the format and design what I am After