title: Unable to overwrite bootstrap with external css
body: <p>I recently started a coding bootcamp and we are learning about bootstrap.  A lot of my friends prefer to stay away from bootstrap for other reasons, but we are learning it in class so no choice. Anyway, I've tried many things. I've tried adding a new class to the element I'm trying to style, I've tried to be specific like <code>div &gt; p .lead</code>, and quite a few other ideas, all followed by the <code>!important</code> text. I am starting to think perhaps maybe my external stylesheet isn't being linked properly. I've quadruple checked the file locations and tried changing things to see if that would help, still no dice. I've tried reaching out to some of my friends for help as well, but most of them are already at work and can't help me at the moment, so that brings me here! </p>
  
  <p>My HTML and CSS code. I know the CSS is pretty plain, this is just for testing purposes, trying to find out how to overwrite the html. I greatly appreciate your time for looking at this. </p>
  
  <p>On a side note, a lot of my classmates make fun of how I space out my coding. If you guys think this is an issue, speak up! I want to know so I don't get locked into one way of doing things, and have time to adjust my muscle memory before it sets in and becomes tough to change! Thank you</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.jumbotron h1
  {
      background-image: url(/img/pizza.png) !important;
  }
  title
  {
      font-family: cursive !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html 
      lang="en"
  &gt;
  &lt;head&gt;
  &lt;link 
      rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
      crossorigin="anonymous"
  &gt;
  &lt;link 
      rel="stylesheet"
      type="text/css"
      href="/css/custom.css"
  &gt;
  
  &lt;meta 
      charset="UTF-8"
  &gt;
  &lt;meta 
      name="viewport" 
      content="width=, initial-scale=1.0"
  &gt;
  &lt;meta 
      http-equiv="X-UA-Compatible" 
      content="ie=edge"
  &gt;
  &lt;title&gt;
      Pizza World
  &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav 
      class="navbar navbar-expand-lg navbar-light bg-light"
  &gt;
      &lt;a 
          class="navbar-brand" 
          href="#"
      &gt;
          Pizza World
      &lt;/a&gt;
      &lt;button 
          class="navbar-toggler" 
          type="button" 
          data-toggle="collapse" 
          data-target="#navbarSupportedContent" 
          aria-controls="navbarSupportedContent" 
          aria-expanded="false" 
          aria-label="Toggle navigation"
      &gt;
      &lt;span 
          class="navbar-toggler-icon"
      &gt;
      &lt;/span&gt;
      &lt;/button&gt;
  &lt;div 
          class="collapse navbar-collapse" 
          id="navbarSupportedContent"
  &gt;
      &lt;ul 
          class="navbar-nav mr-auto"
      &gt;
          &lt;li 
              class="nav-item active"
          &gt;
          &lt;a 
              class="nav-link" 
              href="#"
          &gt;
              Order Online 
          &lt;span 
              class="sr-only"
          &gt;
              (current)
          &lt;/span&gt;
          &lt;/a&gt;
          &lt;/li&gt;
          &lt;li 
              class="nav-item"
          &gt;
          &lt;a 
              class="nav-link" 
              href="#"
          &gt;
              Menu
          &lt;/a&gt;
          &lt;/li&gt;
  &lt;form 
      class="form-inline my-2 my-lg-0"
  &gt;
      &lt;input 
          class="form-control mr-sm-2" 
          type="search" 
          placeholder="Zip Code" 
          aria-label="Zip Code"
      &gt;
      &lt;button 
          class="btn btn-outline-success my-2 my-sm-0" 
          type="submit"
      &gt;
          Search stores near you!
      &lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div 
      class="jumbotron"
  &gt;
          &lt;h1 
              class="display-12 myh1class"
          &gt;
              Hello, world!
          &lt;/h1&gt;
          &lt;p 
              class="lead"
          &gt;
              This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
          &lt;/p&gt;
          &lt;hr 
              class="my-4"
          &gt;
          &lt;p&gt;
                  It uses utility classes for typography and spacing to space content out within the larger container.
          &lt;/p&gt;
          &lt;p 
          class="lead"
          &gt;
            &lt;a 
              class="btn btn-primary btn-lg" 
              href="#" 
              role="button"
          &gt;
              Learn more
          &lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  &lt;script             
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i
      ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
      crossorigin="anonymous"
  &gt;
  &lt;/script&gt;
  &lt;script 
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
      crossorigin="anonymous"
  &gt;
  &lt;/script&gt;
  &lt;script 
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
      crossorigin="anonymous"
  &gt;
  &lt;/script&gt;
  
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>