Miriana's questions

Este código não é meu, é um código gratuito que encontrei na toyhouse, e eu queria fazer algumas edições para se adequar às minhas preferências. Isto é o que eu tenho:

Na parte inferior há uma barra de rolagem horizontal (é cinza, mas mal visível), mas não vai funcionar porque os outros 3 botões de círculo que eu quero exibir estão na parte inferior (não visíveis, porque eu configurei o overflow-y para oculto). Aqui está uma visão melhor do que está acontecendo quando eu configurei o overflow-x e y para automático:

Estou com dificuldades para colocar todos os 7 círculos um ao lado do outro na mesma linha, sem sucesso ;; Como o código não é totalmente meu, não tenho certeza do que devo ou não editar para evitar que o código todo quebre. Peço desculpas se estiver bagunçado ou impraticável, html não é realmente minha área de codificação.

Aqui está o código que tenho agora! (Observe que o contêiner está em uma posição fixa dentro de uma grade bootstrap maior)

<!-- container -->
    <div class="col-md-6 col-sm-12 pl-md-2 mt-md-n5" style="position: relative">
        <div class="col-12 p-0 overflow-auto" style="color: #571034; background-color: fff0f4; border: solid 1px #db4b73; font-family: courier new; font-size: 15px;  z-index: 1; max-height: 257px; min-height: 257px; border-radius: 10px; ">
            
            <div class="p-1" style="border-bottom: solid 1px #db4b73;">
              <div class="row no-gutters align-items-center justify-content-center">
                <div class="card bg-transparent p-1 m-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 100px; font-size: 14px; color:#db4b73; border-color: #ff4d89; border-radius: 5px; margin-left: 10px">
                                <a><!-- commissions button code --></a>
                                <span>Commissions</span>
                </div>
              </div>
            </div>
            
            <!-- friends -->
            <div class="col-12" style="border-top: solid 1px #db4b73; position: absolute; bottom: 0;">
              
              <div class="row pt-1 pb-2 no-gutters" style="min-height: 60px; max-height: 60px; overflow-x: auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #db4b73;">
                  
                      <!--===friends links ===-->
                      <a><img src=""></a> <!-- circle button code, a href with a styled img inside, there's 7of these -->
              </div>
              
           </div>
            
       </div>
   </div>