I feel like I'm struggling conceptually

2

There were a few mistakes in your code which I cleaned up for you. That’s how a single HTML file should be written for your task. You said you were using Codepen - make sure to import bootstrap with Codepen’s interface (See: How To Add Bootstrap To Codepen)

Example of a standalone .html file using bootstrap

<!doctype html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
li {
  color: black;
}
</style>
</head>
<body>
<div id="navbar">
  <nav class="navbar navbar-default">"
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">ZCHDesign</a>
      </div>
      <ul class="navbar-nav">
        <li class="active">
          <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Hire</a></li>
      </ul>
    </div>
  </nav>
</body>
</html>