I am very very new to coding. Right now, I am having issues with keeping the text within a text box when I want 2 different size boxes stacked on top of each other.
I need the text to remain inside the red box, preferably aligned to the top of the red box.
Then I need the red box and its text centered in the blue box.
.large-box { width: 300px; height: 300px; background-color: rgb(62, 118, 221); /* Sets the background color */ border: 3px solid black; /* Adds a border for visibility */ padding: 10px; margin: 20px; color: white; /* Sets the text color inside the box */ text-align: center; line-height: 100px; /* Vertically centers text for single line */ display: flex; justify-content: center; align-items: center;}.small-box { width: 75px; height: 75px; background-color: rgb(250, 99, 124); border: 5px solid rgb(80, 31, 31); padding-left: 3px; padding-bottom: 10px; word-wrap: break-word; color: black; display: flex; justify-content: center;}<div class="large-box"><div class="small-box"> center this div</div></div>