Переместите тег h1,

Question

Позиционирование <h1> в положение, которое я хочу.

Вот что я пытаюсь сделать: https://imgur.com/a/D0ief0a

CSS-файл и HTML-файл

@import url('https://fonts.googleapis.com/css? family=Montserrat:400,600');
body {
  font-family: 'Montserrat';
  padding: 0;
  margin: 0;
}

.header {
  position: relative;
  background-color: antiquewhite;
}

.header img {
  padding: 1em 2em;
  width: 10%;
  display: block;
  border-radius: 80px;
}

.header h1 {
  padding: 1em;
  text-align: center;
  font-size: 3em;
  position: relative;
}

<header>
  <div class="header">
    <img src="../Welcome/images/123.jpg" alt="">
    <h1> A Work In Progress</h1>
  </div>
</header>

Я перепробовал все, что приходит в голову.

Answer 1

Посмотрите, поможет ли это:

JSFiddle DEMO

.header img {
padding: 1em 2em;
width: 10%;
border-radius: 80px;
position: fixed;
float: left;
display: inline-block;
}

Добавлено float: left; и position: fixed;, также изменено display на inline-block

Answer 2

Я думаю, что лучший способ сделать это - использовать position:fixed:

.header h1 {
    text-align: center;
    font-size: 3em;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Это будет держать его по центру, независимо от устройства, входящего на ваш сайт.

Немного поиграйте с параметрами, чтобы получить желаемое положение, также вы можете сделать это и с фоном.