Tailwind: How align text in container with no-full-width parent?

Question

I'm using tailwind and I have a problem. I have the next code:

<div class="container mx-auto">
  the in the right position
</div>

<div  class="bg-cyan-300 w-10/12 lg:w-9/12 rounded-r-full pb-3 py-4 flex justify-between pl-2 pr-5 items-center">
  <h2 class="container mx-auto text-black text-lg lg:text-2xl xl:text-3xl">
    THIS TEXT HAVE TO BE ALIGN
  </h2>
</div>

https://play.tailwindcss.com/NCE6tvvveG

But i need to align the text with the container. But as the parent container have not full width, it is align at start element.

Exist a way or trick to do it, without make relative/absolute the parent and move to the left?

thanks

Answer 1

<script src="https://cdn.tailwindcss.com/3.4.4"></script>

<div class="container mx-auto">
  the in the right position
</div>

<div  class="bg-cyan-300 w-10/12 lg:w-9/12 rounded-r-full pb-3 py-4 flex justify-between pl-2 pr-5 items-center">
  <h2 class="mx-auto text-black text-lg lg:text-2xl xl:text-3xl -ml-2 sm:pl-[calc((100cqw-theme(screens.sm))/2)] md:pl-[calc((100cqw-theme(screens.md))/2)] lg:pl-[calc((100cqw-theme(screens.lg))/2)] xl:pl-[calc((100cqw-theme(screens.xl))/2)] 2xl:pl-[calc((100cqw-theme(screens.2xl))/2)]">
    THIS TEXT HAVE TO BE ALIGN
  </h2>
</div>

• Apply -ml-2 to cancel out the pl-2 on the parent.
• For each subsequent media query:
  1. Find the difference between the max-width of the container and the viewport width (100cqw - theme(screens.sm)).
  2. Halve this result (/ 2).
  3. Apply it to padding-left to have the text be aligned on the left edge.

Answer 2

<div class="container ml-4">
  the in the right position
</div>

<div  class="bg-cyan-300 rounded-r-full ">
  <h2 class="container text-black text-lg lg:text-2xl xl:text-3xl ml-4">
    THIS TEXT HAVE TO BE ALIGN
  </h2>
</div>

Add your extra styling as needed