im trying to my a flyer with a pricing tier of what you get for each tier with a corresponding image to go with it. but if you look at the code the image and elements go beyond the white panelcontainer im trying to keep it all in it
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Price Tiers</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700"><link rel="stylesheet" href="pricing.css.css"></head><body><div class="panel pricing-table"><div class="pricing-plan"><img src="icons/icon1.png" alt="" class="pricing-img"><h2 class="pricing-header">Personal</h2><ul class="pricing-features"><li class="pricing-features-item">Custom domains</li><li class="pricing-features-item">Sleeps after 30 mins of inactivity</li></ul><span class="pricing-price">Free</span><a href="#/" class="pricing-button">Sign up</a></div><div class="pricing-plan"><img src="icons/icon2.png" alt="" class="pricing-img"><h2 class="pricing-header">Small team</h2><ul class="pricing-features"><li class="pricing-features-item">Never sleeps</li><li class="pricing-features-item">Multiple workers for more powerful apps</li></ul><span class="pricing-price">$150</span><a href="#/" class="pricing-button is-featured">Free trial</a></div><div class="pricing-plan"><img src="icons/icon3.png" alt="" class="pricing-img"><h2 class="pricing-header">Enterprise</h2><ul class="pricing-features"><li class="pricing-features-item">Dedicated</li><li class="pricing-features-item">Simple horizontal scalability</li></ul><span class="pricing-price">$400</span><a href="#/" class="pricing-button">Free trial</a></div></div></body></html>html{ box-sizing: border-box; } body { background-color: blue; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .panel { display: flex; background-color: whitesmoke; flex-direction: column; text-align: center; max-width: 960px; width: 100%; text-transform: uppercase; border-radius: 25px; padding: 15px; } .pricing-img { margin-bottom: 25px; } .pricing-header { color: gray; text-transform: uppercase; } .pricing-features { border-top: 1px solid gray; letter-spacing: 1px; color: blue; font-weight: 600; font-size: 12px; } .pricing-features-item { margin: 25px 0; border-bottom: 1px solid gray; } .pricing-price { display: block; color: blue; font-weight: 600; font-size: 25px; margin: 25px 0; } .pricing-button { border-radius: 20px; border: 1px solid blue; color: blue; padding: 24px 50px; margin: 25px 0; } .pricing-button.is-featured { background-color: blue; color: white; } .pricing-button.is-featured:hover { background-color: aqua; color: white; } @media (min-width:900px) { .panel { display: flex; flex-direction: row; }.pricing-plan { border-right: 1px solid gray; padding: 25px 50px; } .pricing-plan:last-child { border-right: none; } }iv tryed to turn the panel container into a flexboxe in hopes that everything will just fit right inside of it but nothing works the images and elements keeps going beyond the panel container and into the body