Lines appear after scaling up content-CodePudding

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.

* {
    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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try Out</title>
    <link rel="stylesheet" href="plan.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

</head>
<body>
    <div >
        <div >
            <h3>Starter Plan</h3>
            <p >For those just getting started</p>
        </div>
        <div >
            <ul>
                <li> <span >✓</span> Acccess to all recordings </li>
                <li> <span >✓</span> 5 code downloads per day</li>
                <li> <span >✓</span> 1 live tutorial every month</li>
                <li> </li>
            </ul>
        </div>
             
        <div >
            <p >$68</p>
            <p >per month</p>
        </div>
        <div >
            <span >Purchase</span>
        </div>
        <p >Minimum spend $869 over 12 months</p>

    </div>
    
    <section >
        <div >
            <h3>Basic Plan</h3>
            <p >The perfect all-rounder</p>
        </div>
        <ul>
            <li> <span >✓</span> Acccess to all recordings </li>
            <li> <span >✓</span> 20 code downloads per day</li>
            <li> <span >✓</span> 5 live tutorial every month</li>
            <li> </li>
        </ul>
        <div >
            <p >$99</p>
            <p >per month</p>
        </div>
        <div >
            <span >Purchase</span>
        </div>
        <p >Minimum spend $1.118 over 12 months</p>
    </section>

    <section >
        <div >
            <h3>Enterprise Plan</h3>
            <p >For people serious about coding</p>
        </div>
        <div >
            <ul>
                <li> <span >✓</span> Acccess to all recordings </li>
                <li> <span >✓</span> Unlimitted code downloads per day</li>
                <li> <span >✓</span> Personalized text editor</li>
            </ul>
        </div>

        <div >
            <p >$250</p>
            <p >per month</p>
        </div>
        <div >
            <span >Purchase</span>
        </div>
        <p >Minimum spend $3000 over 12 months</p>
    </section>


    
</body>
</html>

CodePudding user response：

It's because the scaling, the background color hits through. The following code will fix the issue:

.plan {
    background-color: #f6f2f3;
    border-radius: 25px;
}

CodePudding user response：

<div >
    <div >
        <h3>Starter Plan</h3>
        <p >For those just getting started</p>
    </div>
    <div >
        <p >✓ Acccess to all recordings</p>
        <p >✓ Acccess to all recordings</p>
        <p >✓ Acccess to all recordings</p>
        <div >
            <p >$68</p>
            <p >per month</p>
        </div>
        <button >Purchase</button>
        <div >Minimum spend $869 over 12 months</div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.plan {
    width: 70%;
    max-width: 300px;
    margin:  auto;
    height: 300px;
}
.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;
}

.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);

}

.footer {
    padding: 20px;
    font-size: 14px;

}

.plan:hover {
    transform: scale(110%);
    border: none;
    border-collapse: collapse;


}

.button:hover {
    background-color: #087c99;
    color: white;
    cursor: pointer;
    overflow: hidden;
}

.list {

    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #f8f2f3;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.list p {
    padding: 25px 40px;
    line-height: 30px;
    font-size: 14px;
    max-height: 100px;
}