HTML non lié à la feuille de style CSS externe

Cela devrait être simple.

Mon about.html a une feuille de style externe qui y est aboutstyle.css intitulée aboutstyle.css . Le code est contenu dans l'élément head et correspond exactement au nom du fichier html. Pour une raison quelconque, le style ne passe pas.

Qu'est-ce que je fais de mal ici? Mon fichier index.html a le même type de lien EXACT, mais celui-ci est lié à style.css . Le fichier d'index a le style qui s'affiche.

Voici mon HTML ci-dessous:

* {margin: 0;
  padding: 0;}

.gray {
  background-color: #ebebeb;
}
.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #ebebeb;
    color: #004e98;
    max-width: 1560px;
    margin: 0 auto;
}

/* BRAND TITLE CSS ALL PROPERTIES */

.brand-title {
    font-size: 1.7rem;
    margin: 1rem 1rem 1rem 30px;
    font-weight: bold;
    text-decoration: none;
/*     background-color: pink; */
/*leave margin, it affects space around ur name when mobile size*/
}

a:link {
  text-decoration: none;
  color: #004e98;
}

a:visited {
  color: #004e98;
}

/* BRAND TITLE CSS ALL PROPERTIES END */


.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;    /*makes list horizontal, not vertical*/
    margin-right: 30px;
    padding: 0;
/*     background-color: yellow; */

}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: #004e98;
    padding-left: 2rem;
    font-size: 1.2rem;
}

.navbar-links li a:hover {
    color: #ff6700;
}

.brand-title a:hover {
    color: #ff6700;
    text-decoration: none;
}

.toggle-button {
    position: absolute;
    top: 1.2rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background-color: pink;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
     background-color: #004e98;  /* color of individual bars*/
    border-radius: 10px;
}

@media (max-device-width: 640px) and (min-device-width: 320px) {
 .Content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-gap: 15px !important;
    margin: 20px auto !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
 }

 .brand-title {
     margin: 1rem 1rem 1rem 15px;
}

@media (max-width: 699px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button {
        display: flex;

    }

    .navbar-links {
        display: none;
        width: 100%;
      background-color: white;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
        margin-right: 0; /*this removes margin applied for large screens*/
    }

    .navbar-links ul li {
       text-align: center;
/*        background-color: #EC643E;  /*orange bkg color of drop down*/  */
    }

    .navbar-links ul li a {
      padding: 1rem 1rem;
/*       border-style: solid; */
/*       border-radius: 15px; */
      background-color: ;  /*blue button bkg*/
      margin: 0;
      color: #004e98;

    }

    .navbar-links.active {
        display: flex;
      background-color: #ebebeb;

    }

  .navbar-links li a:hover {
    background-color: #ff6700;  /*orange bar color upon hover*/
    color: white;
}

  .description {
    padding-left: 30px;
  }
}



.Content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 30px;
  max-width: 1500px;
  padding-left: 30px;
  padding-right: 30px;
  margin: 70px auto;
/*   background-color: #ffedba; */
}

.child {
/*   background-color: lightgreen; */
  color: white;
  place-items: left;

}

.child > p {
  color: black;
  font-family: helvetica-light;
  font-size: 1.5em;
  margin-bottom: 10px;
  line-height: 1.5em;

}


.child_2 {
  display: grid;
  place-items: top;
  background-color: pink;
  height: 700px;

}

img {
  width: 100%;
  height: 700px;
  object-fit: cover;
  border-radius: 15px;
}

/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family: Raleway;
}

CSS:

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

<head>
  <meta charset="UTF-8">
  <title>#</title>
  <link rel="stylesheet" type="text/css" href="aboutstyle.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head>


<body>

<!-- NAV -->
<div class="gray">
      <nav class="navbar">
        <div class="brand-title"><a href="index.html">Title</a></div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
     </div>

<!-- PAGE CONTENT -->
<div class="Content">
  <div class="child_2"><img src="https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"> </div>
  <div class="child"><p>Hi there! ipsum dolor sit amet, consectetur adipiscing elit. Integer nisi orci, pretium suscipit malesuada vitae, auctor sed eros. Etiam turpis libero, accumsan ac mauris quis, vehicula porta purus. Aenean dignissim dignissim finibus. Nam egestas magna vel risus finibus, et venenatis neque suscipit. Nulla a molestie ligula. In porttitor lacus id arcu dapibus, a volutpat nibh congue. Pellentesque eu consectetur diam. Etiam sodales lacinia aliquam. Pellentesque convallis interdum orci a placerat. Praesent quis ultricies leo, sit amet sagittis ipsum. Sed eleifend nisi ante, consequat rhoncus turpis aliquam maximus. Suspendisse commodo purus quis nisi interdum consequat. Cras felis ex, bibendum ut ultricies vitae, dictum ac tortor.</p>
</div>

</div>

  <script  src="script.js"></script>


</body>
</html>