Align 3-element block to the left in the center of the page

Question

I'm a beginner and I want to do the following, but I can't figure out how to do it right.

I need to left-center the text with the second text and a button (a block with a text area class) regardless of the screen extension.

In general, I want the text with second text and button (text-area block) to always be in the same place, regardless of the orientation (portrait / landscape). Is there an easy way to do this?

 *{ margin: 0; padding: 0; } body{ min-height: 300vh; background-color: #1D1D1D; z-index: -2; }.section{ position: relative; height: 100vh; }.text-area{ position: relative; } #index-title-main{ color: #fff; font-size: 55px; height: 150px; }.index-form-link{ display: block; max-width: 250px; margin-top: 50px; padding: 10px; color: #35E6BA; font-size: 25px; font-weight: bold; border-radius: 5px; text-decoration: none; border: 1px solid #35E6BA; -webkit-animation: fadein 5s; -moz-animation: fadein 5s; -ms-animation: fadein 5s; -o-animation: fadein 5s; animation: fadein 5s; }.index-form-link:hover{ background-color: #35E6BA; color: #000; font-weight: bold; }.index-backdev{ color: #555; font-size: 24px; margin-top: 20px; margin-bottom: 20px; }

 <section class="section"> <div class="text-area"> <div id="index-title-main">Hi,<br>I am someone. and I am doing something.</div> <a class="index-img-content-link" href="/works.html"><img class="index-img-content" src="img/t-index.png" alt=""></a> <h5 class="index-backdev">Second text</h5> <a class="index-form-link" href="">Btn text</a> </div> </section>

Answer 1

try change your code to this for this line #index-title-main in your css file

#index-title-main{
  color: #fff;
  font-size: 4em;
  display: block;
  overflow: auto;
}