Div not showing up? Nested improperly? Positioned wrong? idk

Tell us what’s happening:

Hi! I’m at the complementary-colors bit of the Applied Visual Design section and I decided to make a color wheel to help figure things out, using what’s been covered so far. Mostly all well and good, but the final color-block disappears as soon as I set position to absolute. Reordering things in both the html and css, z-index, etc, doesn’t seem to work, every other div was done the exact same way, and not sure what I’m missing?

Your code so far


<style>

  body {
    position: relative;
    background-color: #eee;
  }

  .grounding {
    position: absolute;
    top: 40%;
    left: 47%;
    background-color: #000;
    width: 100px;
    height: 100px;
  }

  .red {
    width: 100px;
    height: 100px;
    background-color: #f00;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    bottom: 200px;
  }

      .orange {
        width: 100px;
        height: 100px;
        background-color: #f80;
        border-radius: 50%;
        position: absolute;
        left: 100px;
        bottom: 175px;
      }

    .yellow {
      width: 100px;
      height: 100px;
      background-color: #ff0;
      border-radius: 50%;
      position: absolute;
      left: 175px;
      bottom: 100px;
    }

      .lightGreen {
        width: 100px;
        height: 100px;
        background-color: #8f0;
        border-radius: 50%;
        position: absolute;
        left: 200px;
        bottom: 0px;
      }

  .green {
    width: 100px;
    height: 100px;
    background-color: #0f0;
    border-radius: 50%;
    position: absolute;
    left: 175px;
    top: 100px;
  }

      .pastellyGreen {
        width: 100px;
        height: 100px;
        background-color: #0f8;
        border-radius: 50%;
        position: absolute;
        left: 100px;
        top: 175px;
      }

    .cyan {
      width: 100px;
      height: 100px;
      background-color: #0ff;
      border-radius: 50%;
      position: absolute;
      left: 0px;
      top: 200px;
    }

      .lightBlue {
        width: 100px;
        height: 100px;
        background-color: #08f;
        border-radius: 50%;
        position: absolute;
        right: 100px;
        top: 175px;
      }

  .blue {
    width: 100px;
    height: 100px;
    background-color: #00f;
    border-radius: 50%;
    position: absolute;
    right: 175px;
    top: 100px;
  }

      .purple {
        width: 100px;
        height: 100px;
        background-color: #80f;
        border-radius: 50%;
        position: absolute;
        right: 200px;
        top: 0px;
      }

    .magenta {
      width: 100px;
      height: 100px;
      background-color: #f0f;
      border-radius: 50%;
      position: absolute;
      right: 175px;
      bottom: 100px;
    }

      .pink {
        wifth: 100px;
        height: 100px;
        background-color: #f08;
        border-radius: 50%;
        position: absolute;
        right: 100px;
        bottom: 175px;
      }

</style>

<body>

  <div class="grounding">
    <div class="red"></div>
        <div class="orange"></div>
      <div class="yellow"></div>
        <div class="lightGreen"></div>
    <div class="green"></div>
        <div class="pastellyGreen"></div>
      <div class="cyan"></div>
        <div class="lightBlue"></div>
    <div class="blue"></div>
        <div class="purple"></div>
      <div class="magenta"></div>
        <div class="pink"></div>
  </div>

</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36.

Challenge: Adjust the Color of Various Elements to Complementary Colors

Link to the challenge:

You spelled “width” wrong.

UGHH if this isn’t the stupidest thing. thank you very much sorry I’m so dumb

For what it’s worth, I spend 3 hours a day on the same stupid $#!t… You’d think code spell check would be a thing… lol

-Justin :vulcan_salute: