Xtykutl

My html code for this part looks like this:

<div class="container navbar id="navbar">

     <div class="row banner">



        <span class="one-tenth column logo">

           <i class="fab fa-3x fa-cuttlefish"><a href="index.html"></a></i>

        </span>



        <h1 class="nine-tenths column"><strong>Title</strong></h1>



     </div>

</div>  

so far I tried this in css:

.banner{

  display: -webkit-flex;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:25px 0;

  text-align:center;

}

I am using my own grid system in which I defined:

.one-tenth {

  width: calc(100% /10 * 1);

}



.nine-tenths {

  width: calc(100% / 10 * 9);

}

In addition to all the other rules necessary for a grid system.

My problem is now that my h1 still doesn't display in the middle of the screen/banner (banner width is 100% so its center would also be the middle of the screen).

It displays in the middle of its column which is not the middle of the screen.

It is to keep in mind that the h1 shares its container banner with another column which has the width 10%. H1 itself is a column of 90% width.

I think I got it, what you can do is add to the title a margin-right the same size as the .one-tenth width, in order to do this you need to wrap the title in a span tag

<div class="container navbar id="navbar">

     <div class="row banner">



        <span class="one-tenth column logo">

           <i class="fab fa-3x fa-cuttlefish"><a href="index.html"></a></i>

        </span>



        <h1 class="nine-tenths column"><strong><span class="span">Title</span></strong></h1>



     </div>

</div>

and then you need to add this class to the css

.banner .span{

  margin-right: calc(100% /10 * 1);

}

You can check it here, let me know if that help you!