I want to make the white space around flex items smaller. This is essentially a parent flex box with child flex boxes.
heres my html:
<div class="parent-box"><div class="contain"><div class="modal"><h2>Plans For The Site</h2><p><span class="date">~12-03-24 00:57~</span><br><span class=body>so, in order, i want to get this little blog thing working and looking the way i want, create the gifs and pictures for the background and buttons, create a font and add it, add some little music effects to everything, add some content to the different pages, add a little gir cursor, and then i think ill put the link up on my socials. once i get to the point of putting it up on my socials, ill subscirbe and get a domain name that i like... before that im just gonna keep working on the free subscription unless i run out of space. eta with the way im working looks to be about a week- 3 weeks, esp with the clothing im working on.</span></div></div><div class="contain"><div class="modal"><h2>Plans For The Site</h2><p><span class="date">~11-03-24 01:38~</span><br><span class=body>Just got the website front page done superficially, need to create the gifs and pictures and background, and need to figure out how to format this blog better than it is atm... make take a day or so... going to bed right now though</span></p></div></div></div>and heres the css:
.contain { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;}.modal { width: 50vw; height: 50%; margin:30px; padding: 1rem; background-color: aqua; border: 1px solid black; border-top: 15px solid black; color: black; overflow: scroll; overflow-x: hidden; display: flex; flex-direction: column; text-align: left;} .parent-box { display: flex; width: 70%; height: 50vh; margin-left:auto; margin-right:auto; margin-bottom:10px; margin-top:10px; overflow: scroll; overflow-x: hidden; justify-content: space-between; align-items: center; flex-direction: column; font-size: 30px; text-align: center; background-color: #7d7d7d; color: #000000; font-weight: bold;}Ive tried using margins in all three css styles, but it seems to do nothing. Im just trying to make the gray space at the top smaller and responsive.