Make text inside header responsive [duplicate] - css

Question

This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 2 years ago.
The following header looks fine on full-width; but once I start sizing down; there's a large gap to the left of the ipsom lorem text, where it should be filling in the full-width of the screen as it sized down. (First picture is full-width; second picture is what should happen when it sizes down).
Here is my code so far:
.header {
background-color: #090c1a;
}
.header-inner {
color: white;
display: grid;
max-width: 1180px;
margin: 180px auto;
grid-template-columns: 1fr minmax(50%, auto);
}
I've also created a codepen for convenience. https://codepen.io/tiotolstoy/pen/PoPzoQw

Answer 1

I don't think a grid is the best approach for what you described. I would do it with a "max-width: 590px" on the nested div inside the header-inner. like here - https://codepen.io/urich/pen/rNOLNZd
.header-inner {
color: white;
max-width: 1180px;
margin: 180px auto;
}
.header-inner >div {
max-width: 590px;
}

Answer 2

If you just want the mobile version's p element to take up full width, with just a tiny bit of padding to prevent text from touching the edge, change your CSS to this:
.header {
background-color: #090c1a;
}
.header-inner {
color: white;
padding: .5rem;
}
You could also add a media query for the larger version to prevent the text from stretching the entire length of the div if you don't want the p element spread out too far on large screens, like this:
#media(min-width: 768px) {
.header-inner {
width: 50%;
}
}
Play around with the percentage until you get the desired width on full screens.