title: Lines appear after scaling up content
body: <p>I'm learning CSS and HTML at the moment and I'm having a hard time understanding why lines appear when I hover over the content. Please, understand that I am just starting to learn and my code is probably unorganised and not as clean as it should be. This is actually my first try doing something alone. Any advice would be appreciated. Thank you.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
  
  ul {
      list-style-type: none;
      margin: 0 auto;
      background-color: #f8f2f3;
      justify-content: center;
      padding: 25px 40px;
      line-height: 30px;
      font-size: 14px;
      max-height: 100px;
  
    } 
  
  .price {
      background-color: #f8f2f3;
      text-align: center;
      overflow: hidden;
      
  }
  .purchase {
      background-color: #f8f2f3;
      text-align: center;
      overflow: hidden;
      
  }
  
  .button {
      border: 2px solid #087c99;
      width: fit-content;
      padding: 10px 15px;
      margin: 25px 0;
      display: inline-block;
      border-radius: 10px;
      color: #087c99;
      font-weight: 600;
      font-size: 20px;
      transition: all ease-in-out 0.2s;
  }
  .dollars {
      font-size: 50px;
      padding-top: 50px;
      
  
  }
  
    ul span {
      color: rgb(21, 175, 21);
      font-weight: 900;
      margin-right: 3px;
      
    }
  body {
      display: flex;
      justify-content: center;
      align-content: center;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      background-color: #343633 ;
      
  }
  .plan {
      width: 70%;
      max-width: 300px;
      justify-content: space-evenly;
      margin: 100px 30px 0 30px;
      transition: all ease-in-out 0.2s;
      flex-wrap: wrap;
      overflow: hidden;
      
      
  
  }
  
  .header {
      background-color: #17bce6 ;
      align-content: center;
      justify-content: center;
      margin: 0 auto;
      padding: 20px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      text-align: center;
      box-shadow: 0px 0px 10px 1px rgb(40, 30, 30);
      overflow: hidden;
      
  }
  
  .header h3 {
      color: white;
      font-size: 25px;
  }
  
  .header p {
      color: white;
  }
  
  .minimum {
      background-color: #f8f2f3;
      padding: 20px;
      font-size: 13px;
      text-align: center;
     border-bottom-right-radius: 25px;
     border-bottom-left-radius: 25px;
     perspective: 1px; 
     overflow: hidden;
  }
  .plan:hover {
      transform: scale(110%);
      border: none;
      border-collapse: collapse;
      overflow: hidden;
  
  }
  
  .button:hover{
      background-color: #087c99;
      color: white;
      cursor: pointer;
      overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Try Out&lt;/title&gt;
      &lt;link rel="stylesheet" href="plan.css"&gt;
      &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
  &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&amp;family=Roboto:wght@400;500&amp;display=swap" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="plan"&gt;
          &lt;div class="header"&gt;
              &lt;h3&gt;Starter Plan&lt;/h3&gt;
              &lt;p class="description"&gt;For those just getting started&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="list"&gt;
              &lt;ul&gt;
                  &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; Acccess to all recordings &lt;/li&gt;
                  &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; 5 code downloads per day&lt;/li&gt;
                  &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; 1 live tutorial every month&lt;/li&gt;
                  &lt;li&gt; &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
               
          &lt;div class="price"&gt;
              &lt;p class="dollars"&gt;$68&lt;/p&gt;
              &lt;p class="permonth"&gt;per month&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="purchase"&gt;
              &lt;span class="button"&gt;Purchase&lt;/span&gt;
          &lt;/div&gt;
          &lt;p class="minimum"&gt;Minimum spend $869 over 12 months&lt;/p&gt;
  
      &lt;/div&gt;
      
      &lt;section class="plan"&gt;
          &lt;div class="header"&gt;
              &lt;h3&gt;Basic Plan&lt;/h3&gt;
              &lt;p class="description"&gt;The perfect all-rounder&lt;/p&gt;
          &lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; Acccess to all recordings &lt;/li&gt;
              &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; 20 code downloads per day&lt;/li&gt;
              &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; 5 live tutorial every month&lt;/li&gt;
              &lt;li&gt; &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="price"&gt;
              &lt;p class="dollars"&gt;$99&lt;/p&gt;
              &lt;p class="permonth"&gt;per month&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="purchase"&gt;
              &lt;span class="button"&gt;Purchase&lt;/span&gt;
          &lt;/div&gt;
          &lt;p class="minimum"&gt;Minimum spend $1.118 over 12 months&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section class="plan"&gt;
          &lt;div class="header"&gt;
              &lt;h3&gt;Enterprise Plan&lt;/h3&gt;
              &lt;p class="description"&gt;For people serious about coding&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="list"&gt;
              &lt;ul&gt;
                  &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; Acccess to all recordings &lt;/li&gt;
                  &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; Unlimitted code downloads per day&lt;/li&gt;
                  &lt;li&gt; &lt;span class="check"&gt;✓&lt;/span&gt; Personalized text editor&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="price"&gt;
              &lt;p class="dollars"&gt;$250&lt;/p&gt;
              &lt;p class="permonth"&gt;per month&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="purchase"&gt;
              &lt;span class="button"&gt;Purchase&lt;/span&gt;
          &lt;/div&gt;
          &lt;p class="minimum"&gt;Minimum spend $3000 over 12 months&lt;/p&gt;
      &lt;/section&gt;
  
  
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>