问粘边不粘

EN

.about {
  margin-top: 50px;
}

h4 {
  padding-left: 0.3rem;
}

.h-100 {
    display: flex; /*add this it*/
}

.about-header-image {
  background-size: cover !important;
  background-color: #919191;
  width: 100%;
  border-radius: 0px !important;
  padding-top: 3rem !important;
  padding-bottom: 2rem !important;
  margin-bottom: 0px;
  margin-top: 42px !important;
}

.nav-with-bar ul {
  list-style-type: none;
  padding-left: 10px;
}

.nav-with-bar.aboutnav {
  position: sticky;
  top: 81px; /*add this it*/
  margin-top: 25px;
  padding: 0px;
  bottom: 100%;
  z-index: 100;
  width: 150px;
  
  display: flex!important; /*add this it*/
  flex-direction: column; /*add this it*/
  height: 100%; /*add this it*/
}

.nav-with-bar h5 {
  text-decoration: underline;
}

.nav-with-bar .nav-link:hover {
  text-decoration: underline;
}

.nav-with-bar .nav-link.active {
  border-right: 3px solid blue;
}

.nav-with-bar a {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0px;
}

.nav-with-bar a:hover {
  color: #064579;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&amp;display=swap" rel="stylesheet">
<div class="content">
  <nav class="navbar fixed-top navbar-expand-lg bg-dark">
    <div class="d-flex flex-grow-1 container-fluid pl-2">
      <a class="navbar-brand text-white" href="/Index">
        <span style="white-space: nowrap;" class="d-inline-block">Website</span>
      </a>
    </div>
  </nav>
  <div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
    <div class="my-auto text-center">
      <h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
        Website Name
      </h1>
    </div>
  </div>
  <div class="h-100">
    <div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
      <h5>About Us</h5>
      <ul>
        <li>
          <a href="/About#purpose" class="nav-link">Purpose</a></li>
        <li>
          <a href="/About#founding" class="nav-link">Founding</a></li>
        <li>
          <a href="/About#future" class="nav-link">Future</a></li>
        <li>
          <a href="/About#contributors" class="nav-link">Contributors</a></li>
        <li>
          <a href="/About#contact" class="nav-link">Contact</a></li>
      </ul>
    </div>
    <div class="col-md-7 d-inline-block about">
      <div id="purpose" style="font-size: x-large;">
        <h4 class="mb-0">Filler Text</h4>
        <hr class="nogap">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</div>