html - CSS not changing text colour or size when targeting className in react

Question

I'm trying to target the weather-location-container and location to change the text design / colour in CSS.

All my other CSS seems to be working fine. I'm not sure why it isn't working?

Thanks

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  text-align: center;
  background-image: url("./assets/376.png");
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


main {
  min-height: 100vh;
  padding: 50px;
  margin: 75px;
}

.search {
  width: 100%;
}

.search .postcode-search-bar {
  display: block;
  width: 100%;
  padding: 15px;

  border: none;
  background-color: rgba(255, 255, 255, 0.671);

  border-radius: 16px 16px 16px 16px;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.2);

  font-size: 1rem;
  text-align: center;

  transition: 0.4s ease;
}

.search .postcode-search-bar:focus {
  background-color: rgba(255, 255, 255, 0.89);
}

h1::before {
  content: "1F31E";
  padding: 10px;
}
h1::after {
  content: "1F30D";
  padding: 10px;
}

h1 {
  color: rgb(1, 55, 102);
  padding: 30px;
}

/* Why isn't the below working? */

.weather-location-container .location {
  color: red;
  font-size: 3rem;
  font-weight: 500;
  text-align: center;
}

React

import "./App.css";

function App() {
  let date = new Date().toDateString();
  date = date.slice(3, 15);

  return (
    <div className="app">
      <main>
        <div className="search">
          <h1>Local Weather</h1>
          <input
            type="text"
            className="postcode-search-bar"
            placeholder="Enter your postcode..."
          />
        </div>
        <div className="weather-location-container">
          <div className="location">London</div>
          <div className="date">{date}</div>
        </div>
        <div className="weather-container">
          <div className="temp">8°c</div>
          <div className="weather">Cloudy</div>
        </div>
      </main>
    </div>
  );
}

export default App;

Answer 1

try to be more specific

main .weather-location-container .location {
  color: red;
  font-size: 3rem;
  font-weight: 500;
  text-align: center;
}