How can I write my CSS code to match the given design?

I am new to CSS and I want to write code to match the following design.

I have tried lots of properties like position, z-index and so on.

I just got stuck. I really need help to make the section portion stack on the bg-pattern-holder. Here is the design I want to achieve:

And here is the output of my code

Here is my code:

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



:root {
    font-size: 16px;
}

.bg-pattern-holder {
    background-image: url("assets/images/background-pattern-mobile.svg");
    background-repeat: no-repeat;
    height: 180px;
}

body {
    background-color:  hsl(275, 100%, 97%);
}
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 375px;
    margin: 0px auto;
    position: relative;
}
body * + * {
    margin-top: 1.3em;
}

section {  
    margin: 40px auto;
    background:  hsl(0, 0%, 100%);
    width: 300px;
    background-color: blue;
}

.label {
    position: relative;
    cursor: pointer;
}

section {
    position: absolute;
    top: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | FAQ accordion</title>

</head>
<body>

  <main>
      <div class="bg-pattern-holder"></div>
      <section>
      <h1>FAQs</h1>
      <div class="container">
        <div class="label">What is Frontend Mentor, and how will it help me?</div>

        <div class="content">
          Frontend Mentor offers realistic coding challenges to help developers improve their 
          frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
          all levels and ideal for portfolio building.
        </div>
      </div>

      <hr>

      <div class="container">
        <div class="label">Is Frontend Mentor free?</div>

        <div class="content">Yes, Frontend Mentor offers both free and premium coding challenges, with the free 
            option providing access to a range of projects suitable for all skill levels.</div>
      </div>

      <hr>

      <div class="container">
        <div class="label">Can I use Frontend Mentor projects in my portfolio?</div>

        <div class="content">Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent
        way to showcase your skills to potential employers!</div>
      </div>

      <hr>
    
      <div class="container">
        <div class="label">How can I get help if I'm stuck on a Frontend Mentor challenge?</div>
      <div class="content">The best place to get help is inside Frontend Mentor's Discord community. There's a help 
      channel where you can ask questions and seek support from other community members.</div>
      </div>
    </section>
  </main>
  
</body>
</html>

Solution

You may add some properties to the section style like

left: 50%;
transform: translateX(-50%);

this would center the section horizontally

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



:root {
    font-size: 16px;
}

.bg-pattern-holder {
    background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?cs=srgb&dl=pexels-guillaume-meurice-1591447.jpg&fm=jpg");
    background-repeat: no-repeat;
    height: 180px;
}

body {
    background-color:  hsl(275, 100%, 97%);
}
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 375px;
    margin: 0px auto;
    position: relative;
}
body * + * {
    margin-top: 1.3em;
}

section {  
    margin: 40px auto;
    background:  hsl(0, 0%, 100%);
    width: 300px;
    background-color: blue;
}

.label {
    position: relative;
    cursor: pointer;
}

section {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%)
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | FAQ accordion</title>

</head>
<body>

  <main>
      <div class="bg-pattern-holder"></div>
      <section>
      <h1>FAQs</h1>
      <div class="container">
        <div class="label">What is Frontend Mentor, and how will it help me?</div>

        <div class="content">
          Frontend Mentor offers realistic coding challenges to help developers improve their 
          frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
          all levels and ideal for portfolio building.
        </div>
      </div>

      <hr>

      <div class="container">
        <div class="label">Is Frontend Mentor free?</div>

        <div class="content">Yes, Frontend Mentor offers both free and premium coding challenges, with the free 
            option providing access to a range of projects suitable for all skill levels.</div>
      </div>

      <hr>

      <div class="container">
        <div class="label">Can I use Frontend Mentor projects in my portfolio?</div>

        <div class="content">Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent
        way to showcase your skills to potential employers!</div>
      </div>

      <hr>
    
      <div class="container">
        <div class="label">How can I get help if I'm stuck on a Frontend Mentor challenge?</div>
      <div class="content">The best place to get help is inside Frontend Mentor's Discord community. There's a help 
      channel where you can ask questions and seek support from other community members.</div>
      </div>
    </section>
  </main>
  
</body>
</html>