Header aligned to the left over center aligned paragraph

Question

The title sounds really confusing but I drew a picture to try to explain:

I want to align my p tag to the center, and just above the p tag, I want h2 tag to be above the p but aligned to the left of it, I tried using padding but it doesn't scale correctly on different resolutions and aspect ratio's

so far what I have tried is

p {
   text-align: center;
}

h2 {
    padding-left: 48%; /* it's what worked with 1440p but not on 1080p */
}

The p and h2 are contained within a div

<div>
   <h2>Title</h2>
   <p>Text Content</p>
<div>

Answer 1

Center an outer div, and set the inner div to display: inline-block :

 .center { text-align: center; }.container{ display: inline-block; } h2 { text-align: left; }

 <div class="center"> <div class="container"> <h2>Title</h2> <p>Text Content</p> </div> </div>