Can't add CSS to Div wrapping Anchor tag-CodePudding

Hi I'm trying to add a colored border to my 'dreams-anchor-wrap' div but can't seem to be able to use any CSS on it for some reason and I'm not sure why. Is it not possible to wrap a div around an anchor tag and then add CSS properties to it?

here's the link to my sandbox code: https://codesandbox.io/s/unruffled-jones-0v0xj?file=/src/App.js

CodePudding user response：

You just misspelled className on 'dreams-anchor-wrap' div.Correct your mistake and should work

CodePudding user response：

You have to write your classes like "class" not className. Then it will be run correctly.

* {
  margin: 0;
  border: 0;
  padding: 0;
}

.dream-homes-container {
  display: flex;
  justify-content: center;
}

.dream-home-card {
  margin: 0 auto;
  padding: 15px;
  width: 200px;
  height: 100%;
}

.dream-homes-container :last-child {
  padding-right: 0;
}

.dream-home-card img {
  width: 100%;
  height: 70%;
}

.property-info {
  width: 100%;
  color: black;
  padding: 0 0 5px 10px;
}

.dream-home-card a {
  text-decoration: none;
  width: 100%;
}

.num-specs-margin {
  margin-right: 10px;
}

.dream-anchor-wrap {
  border:2px solid blue;
}

.dream-homes-wrap {
  margin-bottom: 50px;
}

 <div class="App">
        <div class="dream-home-card">
          <a href="#">
            <div class="dream-anchor-wrap">
              <img src="https://images.pexels.com/photos/2343466/pexels-photo-2343466.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
              <div class="property-info">
                <h4>Pent Suite</h4>
                <div class="property-specs">
                  <i class="fas fa-bed"></i>&nbsp;
                  <span class="num-beds num-specs-margin">4</span>
                  <i class="fas fa-shower "></i>&nbsp;
                  <span class="num-baths num-specs-margin">2</span>
                  <i class="fas fa-car"></i>&nbsp;
                  <span class="num-cars ">2</span>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>