Below is a concise code snippet that showcases the 'issue':
<div class="container-fluid" style="text-align: center">
<h1>REALLYLONGWORDTHATISNOTENDINGANYTIMEINSTEAD</h1>
<button class="btn">ANOTHERSUPERLENGTHYTEXTCANANYONEEVENREADITALL</a>
</div>
You can view the jsfiddle here.
Everything appears normal when the screen size is large:
However, when the screen size decreases, it starts to look like this:
The text exceeds its bounds and requires scrolling, yet the button remains centered on the visible portion of the screen, rather than adjusting to the entire 'view'.
I attempted modifying the overflow property with no success. It seems the issue lies in defining the container's 'boundaries' rather than overflow. How can I resolve this?