I can not get the title h1 element to be aligned to the right-side of page.
html,body { height: 100%; margin: 0; font-family: Arial, sans-serif;}body { display: flex; flex-direction: column;}.title { margin: 20px; margin-bottom: 50px; /* Adds additional space at the bottom */ padding: 10px; border: 6px solid black; /* Add a rectangle (border) around the container */ display: inline-block; /* Shrink to fit the content */ text-align: right; width: fit-content;}.title h1 { margin: 5px 0; /* Margin between each h1 element */ white-space: nowrap; /* Prevent line breaks, keep h1 on one line */}.content { flex: 1; margin: 20px; text-align: left;}.bottom { margin: 20px; margin-bottom: 50px; /* Adds additional space at the bottom */ padding: 10px; border: 6px solid black; /* Add a rectangle (border) around the container */ display: inline-block; /* Shrink to fit the content */ text-align: left; width: fit-content;}.bottom h1 { margin: 5px 0; /* Margin between each h1 element */ white-space: nowrap; /* Prevent line breaks, keep h1 on one line */}<div class="title"><a href="index.html"><h1>AMIR TEYMURI</h1></a></div><div class="content"><h2>List of compositions</h2><p>Content...</p></div><div class="bottom"><a href="bio.html"><h1>BIOGRAPHY</h1></a><a href="misc.html"><h1>MISCELLANEOUS</h1></a><a href="contact.html"><h1>CONTACT</h1></a></div>