When working on my non-WP sites, I usually handle columns using Bootstrap. However, this is my first time delving into CSS positioning without it. I am trying to align my site header elements similar to the image shown, where the text elements are flush right at the edge of the page container:
https://i.sstatic.net/A4nq3.png
Here is the HTML code generated by WordPress:
<div class="site-branding">
<a href="https://misc-ramblings.com/" class="custom-logo-link" rel="home" aria-current="page">
<img width="240" height="110" src="https://misc-ramblings.com/wp-content/uploads/2021/09/cropped-misc_ramblings_logo_16x9.gif" class="custom-logo" alt="Miscellaneous Ramblings"/>
</a>
<h1 class="site-title">
<a href="https://misc-ramblings.com/" rel="home">Miscellaneous Ramblings</a>
</h1>
<p class="site-description">Semi-random musings, cogent analysis & pithy commentary on God, mankind, pop culture & politics</p>
</div>
Below is the CSS code provided by the answerer in response to my previous question on this topic. These rules are the only positioning rules for these HTML elements specified within my custom CSS.
.site-branding {
display: grid;
grid-template-columns: auto 1fr;
justify-content: space-between;
align-items: center;
text-align: right;
}
.custom-logo-link {
grid-row: 1/3;
}
.site-title, .site-description {
align-self: end;
margin: 0;
}
.site-description {
grid-column: 2;
}
.custom-logo {
width: 300px;
max-width: none;
}
Currently, my layout looks like this: https://i.sstatic.net/LG6PH.png
While the vertical positioning issue has been resolved with the logo and text elements now aligned, the text elements are still not positioned correctly on the right side of the page container (you can reference the site banner image for the edge).
How can I fix this alignment issue?