title: No CSS is being recognized.... what am I doing wrong?
body: <p>Issue is pretty straight-forward. My CSS is being completely ignored, but I don't know why. The <code>.Home .lander</code> part works fine, except the border doesn't show up. The bigger problem is the box I'm trying to make under it. No CSS I'm typing for the box is working. Again, all I want to do is make a box. I followed the tutorial here: <a href="https://www.w3schools.com/css/css_boxmodel.asp" rel="nofollow noreferrer">https://www.w3schools.com/css/css_boxmodel.asp</a> but so far absolutely none of this is working for me.</p>
  
  <p>The .js file:</p>
  
  <pre><code>import React from "react";
  import "./Home.css";
  
  export default function Home() {
    return (
      &lt;div className="Home"&gt;
        &lt;div className="lander"&gt;
          &lt;h1&gt;Remind&lt;/h1&gt;
          &lt;p&gt;A simple fitness tracker app&lt;/p&gt;
        &lt;/div&gt;
        &lt;div className="box"&gt;
          Countdown Timer
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>The CSS file:</p>
  
  <pre><code>.Home .lander {
      padding: 80px 0;
      text-align: center;
      border: 5px grey;
  }
  
  .Home .lander h1 {
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
  }
  
  .Home .lander p {
      color: #999;
  }
  
  .Home .box {
      height: 20%;
      width: 20%;
      border: 5px rgb(129, 56, 56);
      margin: 10px;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p>I did some reading on CSS specificity, so I tried changing from className to id. Nothing. I tried all pixels (for consistency?). Nothing. I even tried manipulating the CSS that otherwise works, like the <code>.Home .lander</code>, but the border won't show up. What am I missing? Why can't I make a box?! Four sides. Enclosing text. Really, really simple stuff here, but I'm getting absolutely nowhere.</p>