Align titles in center of page

In my Angular project, I want to write first title1 then a second title2 and next to it there is 2 images as the following image:

HTML :

<div class ="container">
    <div class="col-md-6 ">
        <p class="Title1">title1<p>
            <div class="imageContainer">
                <p class="Title2">title2</p>
                <img class="image2" src="assets/c.png" alt="Your Image">
                <img class="image" src="assets/Loader.gif" alt="Your Image">
            </div>  
    </div>
</div>

<div class ="container">
    <div class="col-md-6 ">
        <p class="Title1">title1<p>
            <div class="imageContainer">
                <p class="Title2">title2</p>
                <img class="image2" src="assets/c.png" alt="Your Image">
                <img class="image" src="assets/Loader.gif" alt="Your Image">
            </div>  
    </div>
</div>

CSS :

.container {
    display: flex;
    font-size: 60px; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

.Title1{
    font-family: Lufga;
    color: black;
    font-size: 5 em;
    margin-bottom: 0;
   text-align: center;

}

.image{
  max-width: 25%;
  display: block; 
  margin-left: 10px; 
  margin-top: 0%;
  // margin-bottom: 10%; 
  // margin-left: 5%;
  
}
.image2{
    max-width: 2.5%;
    display: block; 
    //margin-left: 10px; 
    margin-bottom: 23%; 
       
  }

.imageContainer {
   // margin-bottom: 70%;
    margin-top: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 24%;
  }
  
  .Title2 {
    font-family: Lufga;
    color: black;
    font-size: 23 em;
    text-align: center;
  }

The problem is font size of two titles are the same but normally title2 should be bigger and also I have a space between the first row and the second one besides the second image is not on center so I used the margin to make it in center.

You have some mistakes here:

1. You have given display flex with flex-direction: column to .container, but it has only one child .col-md-6, here either remove .col-md-6 or give display flex to this.

2. For font-size, you have given 5 em, remove space here, use like 5em

3. close you <p> tag correctly with </p>

4. To keep content on same row, in display flex remove flex-direction: column;, default flex-direction is row, so you don't need to add this.

Here is the example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  font-size: 60px;
/*   flex-direction: column;
   */  align-items: center;
  justify-content: center;
  height: 100vh;
}

.Title1 {
  font-family: Lufga;
  color: black;
  font-size: 5em;
  margin-bottom: 0;
  text-align: center;

}

.image {
  max-width: 25%;
  display: block;
  margin-left: 10px;
  margin-top: 0%;
/*   // margin-bottom: 10%; 
  // margin-left: 5%;
   */
}

.image2 {
  max-width: 2.5%;
  display: block;
 /*  //margin-left: 10px;  */
  margin-bottom: 23%;

}

.imageContainer {
/*   // margin-bottom: 70%;
   */  margin-top: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 24%;
}

.Title2 {
  font-family: Lufga;
  color: black;
  font-size: 3em;
  text-align: center;
}

<!-- language: lang-html -->

<div class="container">
  <p class="Title1">title1</p>
  <div class="imageContainer">
    <p class="Title2">title2</p>
    <img class="image2" src="assets/c.png" alt="Your Image">
    <img class="image" src="assets/Loader.gif" alt="Your Image">
  </div>

</div>

<div class="container">
  <p class="Title1">title1</p>
  <div class="imageContainer">
    <p class="Title2">title2</p>
    <img class="image2" src="assets/c.png" alt="Your Image">
    <img class="image" src="assets/Loader.gif" alt="Your Image">
  </div>
</div>

<!-- end snippet -->

change font-size and spacings as per your need.