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.

New contributor

Zaida Nolasco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.