On hover, text appears on top of header

Question

I'm new to .html, self taught, finishing up a website but I'm having some issues with my header.

I have some text that scales on hover, but if part of the text is obscured by the header the text will scale and appear on top of the header, how do I fix this?

I've included a snippet to show what I mean.

/************************** Header *******************/
  header {
    min-height: 150px;
    background: #ccc;
    position: fixed;
    width: 100%;
  }

    header ul{ 
    display: inline;
    text-align: left;
    
    }
    header ul li{
        margin-left: 0px;
        padding: 2px;
    }
    header ul li:first-child{
        margin-left: 0px;
        padding: 2px;
     }
     header ul li:last-child{
      margin-bottom: 30px;
      padding: 2px; 
   }
   
   .spacer{
   height: 150px;
   }
   
/********************* Table & Buttons ******************/

    .select{
      height: 100%; 
      background-color: #f2f2f2; 
      padding-top: 35px;
      padding-bottom: 35px;
    }

    .category {
      margin: 0 auto;
      width: 90%;
      border-collapse: collapse;
      height: 10%;
      background-color: #f2f2f2;
      text-align: center;
      font-size: xx-large;
      
    }

    .mb, .ce{ 
      width: 50%; 
    }

    .mb{ 
      border-right: 2px solid #2F4858;
    }

 
.mb:hover, .ce:hover{
      transform: scale(1.1);
      transition: transform .2s;
    }
      
    .sub{
      text-align: center;
      font-size: x-large;
      width: 100%;
    }

    .btn {
      background-color: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }

   .spacer2 {
    height: 140px;
    background: #f2f2f2;
   }

<header>
  <nav>
    <ul>
      <li> 
        <a>Home</a> 
      </li>
      <li class="current"> 
        Portfolio 
      </li>
      <li> 
        <a>About</a> 
      </li>
      <li> 
        <a>Contact / Services</a> 
      </li>
    </ul>
  </nav>    
</header>

<section class="spacer">
</section>

<seciton>
  <div class="sub">
    <p> Links </p>
  </div>
  <div class="select">
    <table class="category">
      <tr>
        <td class="mb" >
          <button class="btn" style="height: 100%;"> 
           <p style="font-size: xxx-large">Button Number One</p>
          </button>
        </td>
        <td class="ce" >
          <button class="btn" style="height: 100%;"> 
            <p style="font-size: xxx-large">Button Number Two</p>
          </button>
        </td>
      </tr>
    </table>
  </div>
</seciton>

<section class="spacer2">
</section>



    

Answer 1

Using z-index on your header and yours section (be carefull you have wrote seciton one time) did the trick:

/************************** Header *******************/
  header {
    min-height: 150px;
    background: #ccc;
    position: fixed;
    width: 100%;
    z-index: 1; /* ---Set a z-index here--- */
  }
  
    header ul{ 
    display: inline;
    text-align: left;
    
    }
    header ul li{
        margin-left: 0px;
        padding: 2px;
    }
    header ul li:first-child{
        margin-left: 0px;
        padding: 2px;
     }
     header ul li:last-child{
      margin-bottom: 30px;
      padding: 2px; 
   }
   
   .spacer{
   height: 150px;
   }
   
/********************* Table & Buttons ******************/

    .select{
      height: 100%; 
      background-color: #f2f2f2; 
      padding-top: 35px;
      padding-bottom: 35px;
    }

    .category {
      margin: 0 auto;
      width: 90%;
      border-collapse: collapse;
      height: 10%;
      background-color: #f2f2f2;
      text-align: center;
      font-size: xx-large;
    }

    .mb, .ce{ 
      width: 50%; 
    }

    .mb{ 
      border-right: 2px solid #2F4858;
    }

 section {
   z-index: 0; /* ---And another here that is lower--- */
 }
.mb:hover, .ce:hover{
      transform: scale(1.1);
      transition: transform .2s;
      z-index: 0;
    }
      
    .sub{
      text-align: center;
      font-size: x-large;
      width: 100%;
    }

    .btn {
      background-color: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }

   .spacer2 {
    height: 140px;
    background: #f2f2f2;
   }

<header>
  <nav>
    <ul>
      <li> 
        <a>Home</a> 
      </li>
      <li class="current"> 
        Portfolio 
      </li>
      <li> 
        <a>About</a> 
      </li>
      <li> 
        <a>Contact / Services</a> 
      </li>
    </ul>
  </nav>    
</header>

<section class="spacer">
</section>

<section>
  <div class="sub">
    <p> Links </p>
  </div>
  <div class="select">
    <table class="category">
      <tr>
        <td class="mb" >
          <button class="btn" style="height: 100%;"> 
           <p style="font-size: xxx-large">Button Number One</p>
          </button>
        </td>
        <td class="ce" >
          <button class="btn" style="height: 100%;"> 
            <p style="font-size: xxx-large">Button Number Two</p>
          </button>
        </td>
      </tr>
    </table>
  </div>
</section>

<section class="spacer2">
</section>

⚠️I really recommand you to wrap all your content that is not in the header in a <main></main> component to easily write this type of cleaner css rules:

header {
    z-index: 1;
}

main{
    z-index: 0;
}