Текст не по центру экрана, уходит немного вправо из-за картинки, как исправить?

Question

Как сделать так чтобы текст был ровно по центру, а не уходил чуть в право как на картинке? Он уходит вправо из-за картинки, но можно это как-то исправить не убирая картинку?

.logo {
    height: 48px;
    margin-left: 50px;
}

.title2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.title {
    text-align: center;
    width: 100%;
    background-color: #2D3844;
    color: #FFF;
    height: 48px;
    text-shadow: 1px 1px 3px black, 0 0 14px white;
    display: flex;
    flex-wrap: wrap;
}

<header class="title">
    <a href="https://www.hltv.org"><img src="Images/hltv.png" height="120px" class="logo"></a>
    <h1 class="title2">TOP OF HLTV USERS BY COMMENTS</h1>
</header>

Answer 1

Сделать хедеру такой же отступ справа, который занял блок слева.

body {
  font-size: 35%;
}

.logo {
  height: 48px;
  margin-left: 50px;
}

.title2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.title {
  text-align: center;
  width: 100%;
  background-color: #2D3844;
  color: #FFF;
  height: 48px;
  text-shadow: 1px 1px 3px black, 0 0 14px white;
  display: flex;
  flex-wrap: wrap;
  /*  */
  padding-right: 98px;
  box-sizing: border-box;
}

<header class="title">
  <a href="https://www.hltv.org"><img src="Images/hltv.png" height="120px" class="logo"></a>
  <h1 class="title2">TOP OF HLTV USERS BY COMMENTS</h1>
</header>

БЛОГ НА HUSL

Текст не по центру экрана, уходит немного вправо из-за картинки, как исправить?

Ответы (1 шт):