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?


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

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

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

    background-color: rgb(0, 40, 104);
    height: 50%;
    position: relative;


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


  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

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


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.