My overflow: hidden doesn't work

HTML-CSS
1

Hi guys, i started to use css battle, and i can’t figure out why overflow: hidden property doesn’t work here.
it’s the challenge 101

<div> 
  <div id="eye-circle">
    <div class="black-point"></div>
    <div class="circle-one"></div>
  </div>
</div>
<style>
 body{
   background: #161616;
 }
  #eye-circle{
    width: 200px;
    height: 200px;
    background: #A22015;
    border-radius: 50%;
    position: fixed;
    left: 25%;
    bottom: 16%;
    box-shadow: 0 0 0 5.4px
  }
  
  .black-point{
    width: 50px;
    height: 50px;
    background: #000000;
    position: fixed;
    left: 44%;
    bottom:42%;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #E96A23,
                 0 0 0 25px #000000;
    
  }
.circle-one{
  width: 70px;
  height: 70px;
  background: #A22015;
  box-shadow: 0 0 0 13px;
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  
 
}
  
 

  
</style>
2

please post a link to the challenge

3
4

What does the HTML look like?

EDIT: Nevermind. Once I formatted your code, it showed up.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

Are you sure you are adding the overflow: hidden to the correct CSS class?

6

Oh i didn’t know that , ty

7

I’m not sure . i’ve proofed in every class

<div> 
  <div id="eye-circle"><div class="circle circle-one"></div>
    <div class="circle circle-two">
      <div class="circle circle-three"><div>
    <div class="black-point"></div>
    </div>
  </div>
</div>
<style>
 body{
   background: #161616;
 }
  #eye-circle{
    width: 200px;
    height: 200px;
    background: #A22015;
    border-radius: 50%;
    position: absolute;
   
    left: 25%;
    bottom: 16%;
    box-shadow: 0 0 0 5.4px;
     overflow:hidden;
    
    .circle {
      overflow: hidden;
      
    }
  }
  
  .black-point{
    width: 50px;
    height: 50px;
    background: #000000;
    position: fixed;
    left: 44%;
    bottom:42%;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #E96A23,
                 0 0 0 25px #000000;
    
    
  }
.circle-one{
  width: 70px;
  height: 70px;
  background: #A22015;
  box-shadow: 0 0 0 13px;
  border-radius: 50%;
  position: fixed;
  overflow: hidden;
  
  
 
}
  .circle-two {
 width: 70px;
  height: 70px;
  background: #A22015;
  box-shadow: 0 0 0 13px;
  border-radius: 50%;
  position: fixed;
   left: 59%;
    overflow: hidden
  
  }

  .circle-three{
    width: 70px;
  height: 70px;
  background: #A22015;
  box-shadow: 0 0 0 13px;
  border-radius: 50%;
  position: fixed;
    bottom: 10%;
    left: 42%;
    overflow: hidden
  }
  
 

  
</style>
8

Why did you nest another selector within a selector?