No CSS is being recognized.... what am I doing wrong? - html

Question

Issue is pretty straight-forward. My CSS is being completely ignored, but I don't know why. The .Home .lander 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: https://www.w3schools.com/css/css_boxmodel.asp but so far absolutely none of this is working for me.
The .js file:
import React from "react";
import "./Home.css";
export default function Home() {
return (
<div className="Home">
<div className="lander">
<h1>Remind</h1>
<p>A simple fitness tracker app</p>
</div>
<div className="box">
Countdown Timer
</div>
</div>
);
}
The CSS file:
.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;
}
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 .Home .lander, 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.

Answer 1

Firstly, your border definition is incorrect. When using shorthand css you need to make sure you define everything. So you would do
border: 5px solid grey;
You're doing the same thing with the box. The border property needs to know what type of border you want: solid, dotted, dashed, whatever. So change the border attribute to the following:
border: 5px solid rgb(129, 56, 56)
Lastly, using percentages for width and height only works if you've defined the element's parent width as well. So you'll need to do the following:
.Home { width: 100% }