content extends outside its td border - html table problem

I want to preface this by saying that I'm fairly new to css.

My current problem is that the content inside my td is extending outside of the td. Here's my html:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="example incorrect height style.css">
    </head>
    
    <body>
        <table>
            <tr>
                <td>
                    <div class="container">
                        <p><b>Content</b></p>
                        <p>Content Content Content Content</p>
                        <p>
                            Content: 1, 2, 3, 4, 5, 6, 7, 8
                        </p>
                    </div>
                </td>
                <td>
                    <div class="container">
                        <p><b>Content</b></p>
                        <p>Content Content Content Content</p>
                        <p>
                            Content: 1, 2, 3, 4, 5, 6, 7, 8
                        </p>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

Here's my css:

.container {
    border-radius: 25px;
    background: lightblue;
    padding: 5%; 
    width: 80%;
    height: 80%;
    max-height: 80%;
    
}

table {
    border-collapse: collapse;
    width: 100%;
    table-layout:fixed;
}

table, td {
    border: 1px solid black;
}

td {
    height: 200px;
}

The width of each container looks correct, however the height is very off. It's extending out of the td at max-height: 80%. Why is that?

Also I noticed that using a % for padding doesn't work well. It seems like the % uses the viewport size rather than the width and height of either container or td. Why is that? (Try setting it to 50% to see what I mean)

Thank you for your help.