Sticky Text Blocks Issue - underlapping when scrolling issue

Hello,

https://www.innercirclewealth.ca/welcome-1

My homepage has a table about 3/4 of the way down under the scrolling title "How we measure up". I've made the 4 coloured text blocks ("robo-advisor", "inner circle", "bank advisor" & "private wealth") sticky for mobile devices or very narrow browser windows (less than 640px wide) through CSS code as follows:

/* Sticky Table Headings */
@media screen and (max-width:640px) { 
  
  /* Robo-Advisor */
  .fe-block-78207b8bfa84a1b78396 {
    position: sticky !important;
    position: -webkit-sticky !important;
    top:79px !important;
  }
  
    /* Inner Circle */
  .fe-block-0cde6332ff7c6799e358 {
    position: sticky !important;
    position: -webkit-sticky !important;
    top:79px !important;
  }
  
      /* Bank Advisor */
  .fe-block-0e0f104fc27c1fe05829 {
    position: sticky !important;
    position: -webkit-sticky !important;
    top:79px !important;
  }
  
      /* Private Wealth */
  .fe-block-6e77432adcff5e52ba74 {
    position: sticky !important;
    position: -webkit-sticky !important;
    top:79px !important;
  }

However, I'm encountering this strange issue where about 50% of the time when scrolling on either my phone or desktop, my sticky boxes will slide underneath the text/background blocks below them (screenshot attached). How do I keep these sticky header text blocks floating above the items that they are scrolling over?

Thanks in advance! This community is awesome ❤️

That worked! Thank you so much! ❤️