Learning HTML & CSS CHALLENGE STRUGGLE

First time here.

I'm taking Angela Yu's web development bootcamp and doing a project that's testing my knowledge of the cascade (specificity and inheritance), CSS selectors and their combinations, and positioning.

I need to recreate the flag of Laos solely with CSS and WITHOUT touching the existing html. This is supposed to be a challenge. I struggled with specificity of the most inner p element, and I need to center the text inside the circle, but I'm really stuck on what I could possibly do to achieve this.

Any help with an explanation, or tips on what I can do better to achieve the goal?

GOAL WHAT I HAVE SO FAR

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Flag Project</title>
  <style>
    /* Write your CSS Code here */
    
   .flag {
    background-color: firebrick;
    height: 600px;
    width: 900px;
    color:white;
    }

    .flag p {
    text-align: center;
    font-size: 65px;
  }
   

   div{
    background-color: rgb(0, 40, 104);
    height: 50%;
    position: relative;
    padding-top: 
   }

   

   .flag div p {
    color: black;
    background-color: white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: absolute ;
    left: 40%
    
   }

  </style>
</head>

<!-- 
  IMPORTANT! Do not change any HTML
Don't add any classes/ids/elements 
Use what you know about combining selectors 
and CSS specificity instead.
Hint 1: The flag is 900px by 600px and the circle is 200px by 200px.
Hint 2: You can use CSS inspection to get the colors from
https://appbrewery.github.io/flag-of-laos/
-->

<body>
  <div class="flag">
    <p>The Flag</p>
    <div>
      <div>
        <p>of Laos</p>
      </div>
    </div>
  </div>
</body>

</html>

I've tried messing with margin and padding of elements, but it usually makes drastic changes that move it away from being one cohesive shape. If I add padding or margin around "The Flag" part it moves more than I want to move. I think I could do something better in terms of positioning but I'm not sure what.

Solution

Instead of directly selecting .flag div p, you can try to have separate styles applied to the div and p element. It is better to treat the two element independently to have better control, like so:

 .flag div div {
        background-color: white;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        position: absolute;
        left: 40%;
        top: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

 .flag div p {
        padding: 100px;
        text-align: center;
        width: 200px;
        color: black;
    }