Floating buttons overlap

Expected behavior The floating buttons should be properly stacked and spaced

Actual behavior The floating buttons overlap

Resources (screenshots, code snippets etc.) Here is the code snippet:

   <div>                                                                                                                                                                            
     <mdb-btn-fixed @mouseenter.native="hover" @mouseleave.native="hoverOut" color="danger" icon="cogs" size="lg" :bottom="100" :right="25">                                        
       <mdb-btn-fixed-item :show="show" @click.native.prevent="ddos" color="danger" icon="shield-alt"/>                                                                             
       <mdb-btn-fixed-item :show="show" @click.native.prevent="prediction" color="danger" icon="brain"/>                                                                            
     </mdb-btn-fixed>                                                                                                                                                               
   </div> 

I also tried to use custom css for the overlapping buttons but it didn't work