Как правильно отцентрировать div, который содержит вложенные круги?

Question

У меня есть абсолютно позиционированные внутренние круги, и я успешно центрировал их, как показано ниже. Внутри наименьшего круга также есть текст.

Проблема в том, когда я хочу сделать его отзывчивым, что также уменьшает ширину. Полоса прокрутки происходит, чего я не хочу, и показываю, что вы помечены красным. Я хочу, чтобы мои круги обрезались с левой и правой сторон, так как я уменьшаю ширину. Как можно Я так делаю?

body{
background-color:blue;
}
 #first-circle {
   border-radius: 50%;
   width: 643px;
   height: 643px;
   border: 1px solid #FFFFFF;
   position: absolute;
   top:28px;
   border: 1px solid rgba(255, 255, 255);
   left: 50%; 
   transform: translate(-50%,0);
 }
 #second-circle {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255);
   width: 508px;
   height: 508px;
   top: 50%;
   left: 50%;
   margin: -254px 0px 0px -254px;
 }

 #third-circle {
    position: absolute;
    width: 382px;
    height: 382px;
    border: 1px solid rgba(255, 255, 255);
    box-sizing: border-box;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -191px 0px 0px -191px;
  }

  #fourth-circle {
    position: absolute;
    width: 254px;
    height: 254px;
    border: 1px solid rgba(255, 255, 255);
    box-sizing: border-box;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -127px 0px 0px -127px;
  }

  #fifth-circle {
    position: absolute;
    font-size:14px;
    width: 128px;
    height: 128px;
    text-align: center;
    color:#fff;
    border: 1px solid rgba(255, 255, 255,.8);
    box-sizing: border-box;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -64px 0px 0px -64px;
  }
  .text-container{
  margin-top:50px;
  }

    <div id="first-circle">   
                          <div id="second-circle" >
                              <div id="third-circle" >
                                <div id="fourth-circle">
                                  <div id="fifth-circle">
                                       <div class="text-container">
                                       Text goes here
                                      </div>       
                                  </div>
                                </div>
                              </div>
                          </div>
                         </div>

Answer 1

Set overflow="hidden" на теле или я могу быть вашим внешним div

Answer 2

пиксель - наихудшая единица для этого
, вы можете использовать vh, если вы хотите, чтобы ваш текст помещался внутри вашего наименьшего круга, вы можете назначить им большие значения соответственно

body{
background-color:blue;
}
 #first-circle {
   border-radius: 50%;
   width: 90vh;
   height: 90vh;
   border: 1px solid #FFFFFF;
   position: absolute;
   top:28px;
   border: 1px solid rgba(255, 255, 255);
   left: 50%; 
   transform: translate(-50%,0) , scale(2);
 }
 #second-circle {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255);
   width: 70vh;
   height: 70vh;
   top: 10vh;
   left: 10vh;
   
 }

 #third-circle {
    position: absolute;
       width: 50vh;
   height: 50vh;
   top: 10vh;
   left: 10vh;
    border: 1px solid rgba(255, 255, 255);
    box-sizing: border-box;
    border-radius: 50%;
  
   
  }

  #fourth-circle {
    position: absolute;
           width: 30vh;
   height: 30vh;
   top: 10vh;
   left: 10vh;
    border: 1px solid rgba(255, 255, 255);
    box-sizing: border-box;
    border-radius: 50%;
   
   
  }

  #fifth-circle {
    position: absolute;
    font-size:14px;
               width: 10vh;
   height: 10vh;
   top: 10vh;
   left: 10vh;
    text-align: center;
    color:#fff;
    border: 1px solid rgba(255, 255, 255,.8);
    box-sizing: border-box;
    border-radius: 50%;
 
  
  }
  .text-container{
  margin-top:0px;
  font-size: 1em;
  }

  <div id="first-circle">   
                          <div id="second-circle" >
                              <div id="third-circle" >
                                <div id="fourth-circle">
                                  <div id="fifth-circle">
                                       <div class="text-container">
                                       
                                      </div>       
                                  </div>
                                </div>
                              </div>
                          </div>
                         </div>

Answer 3

Если вы хотите всегда показывать все круги, вы должны отредактировать все пиксели ширины и высоты в vw / vh, чтобы масштабировать их со страницей. Если вы хотите обрезать «изображение», вы можете установить переполнение скрытым, и круги будут обрезаны.