Center the collapsed Title header on blogger emporio theme

Question

I'm trying to tweak my blogger template (the emporio porcelain theme) to get the collapsed header with my blog logo and text centered. I have managed to get the logo and the text under it but i'm not being able to fix it to make it center

.centered-top-container.sticky .widget.Header h1 {display: none;}
.centered-top-container.sticky .header-inner {text-align: center;}
.centered-top-container.sticky .Header .header-image-wrapper {display: block!important;}
.centered-top-container.sticky .Header img{max-height: 50px;  width: auto;}

I'm trying to use text-align: center on header-inner but i'm not being able to do it. Can anyone help me out on trying to figure what i'm doing wrong?

[blog link][2] [2]: https://www.cheiroaestrume.com/

Answer 1

You should change your flex code.

.sticky .centered-top .blog-name{
  ...
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  ...
}
.sticky .centered-top .search{
  ...
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  ...
}