I'm making a basketball scoreboard and I'm wondering how do I center the score text inside of the scoreboard container?
While the main div is already set as a flex container, the p score text inside of the scoreboard container isn't affected by justify content or align items.
I tried using margin 0 auto and using padding to center it, but that doesn't look good at all.
I would appreciate any help!
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><script src="script.js"></script><title>Home</title></head><body><section class="container"><div><h3>HOME</h3><div class="scoreboard"><p>10</p></div></div><div><h3>GUEST</h3><div class="scoreboard"><p>20</p></div></div></section></body></html>body { margin: 0;}@font-face { font-family: cursed-timer; src: url(cursed-timer.ttf);}.container { margin: 100px auto; width: 600px; height: 425px; background-color: #150400; display: flex; justify-content: space-evenly; border-radius: 2px;}h3 { margin-top: 75px; color: #ffffff; font-size: 48px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; letter-spacing: 1px;}.scoreboard { margin-top: -40px; width: 150px; height: 125px; border: 1px solid #ffffff; border-radius: 2px;}p { color: #ffa500; font-family: cursed-timer; font-size: 72px; margin: 0 auto; padding: 25px;}