Search code examples
htmlcssposition

Reposition an h1 tag,

Positioning the <h1> to the position that I want.

Here's what I am trying to do: https://i.sstatic.net/jgzI0.jpg

CSS File and HTML File

@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>

I tried everything that comes into my mind.

Solution

  • See if it helps :

    JSFiddle DEMO

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

    Added float: left; and position: fixed;, also changed the display to inline-block