How fix the last p element goes below an element container with position fixed?

i have a problem.i want the last paragraph to be clear.in my code the last paragraph goes in below of div with position fixed and it's never shown. div with class btn__container have position of fixed and bottom=0.so this element always stick to the bottom of the page.i want some how i can see the last element in my page.

this is my html & css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Roboto, sans-serif;
    background-color: #eee;
    direction: ltr;
}

main {
    padding: 15px;
}

h1 {
    text-align: center;
}

p {
    margin-top: 20px;
    text-align: justify;
}

.card__container {
    display: flex;
}

.card {
    background-color: deepskyblue;
    color: #eee;
    padding: 15px;
    border-radius: 10px;
    flex: 0 0 40%;
    margin-top: 20px;
    margin-left: 10px;
}

.card > p {
    text-align: start;
}

.btn__container {
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background-color: lightgrey;
    padding: 10px 0;
}
button{
    border: 0;
    outline: none;
    color: #eee;
    background-color: deepskyblue;
    padding: 10px 0;
    flex: 0 0 30%;
    border-radius: 10px;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<main>
    <h1>This is a test page</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda doloremque enim nulla perferendis praesentium
        quos temporibus voluptas voluptatem? Error, illum.</p>
    <div class="card__container">
        <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
        <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
     <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
     <div class="card">
            <h2>Card Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
                similique!</p>
        </div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut dignissimos doloremque esse impedit ipsam
        itaque molestias obcaecati officia pariatur placeat praesentium quis rem rerum sit unde, vel vero?
        Similique.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, expedita?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque eius enim impedit laboriosam officiis
        possimus repellendus sed tempore, voluptates voluptatibus. Adipisci at ea possimus? Architecto autem,
        consequatur culpa cumque earum eligendi illo in maxime, minus nam neque perferendis placeat quasi rerum
        voluptas? Alias est facilis natus quis tempora totam ut!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi facere unde. Eaque est quidem
        quisquam quos repellendus tempora ut.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsa laudantium omnis reiciendis repellendus
        repudiandae sed sit! Ad animi maiores nulla tempora ullam voluptas?</p>

    <div class="btn__container">
        <button>Cancel</button>
        <button>More</button>
    </div>
</main>
</body>
</html>

Solution

u have to use padding bottom for how much fixed div height that much u have to mention for main tag it will work its simple code try below code i have used 70px u can give ur fixed div height

main{
    padding-bottom:70px
  }