How can I put this h1 to center?

Question

How can I put the h1 with the background to the center? I searched for it but I think because I'm too new at coding, I couldn't find where to find the mistake here.

.main-header, h1{
  background-color: black;
  color: white;
text-align:center;
position: relative;
background-size: 100px;
display: inline;
margin: auto
width: auto;
}
body{
  background-color: purple;
  margin: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Lei's Gym Wiki</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <div class="main-header">
    <h1>Welcome To Leindras's Gym Wiki</h1>


  </div>

</body>

</html>

score 1 · Accepted Answer · answered Jul 26 '22 at 21:43

1

All you need is text-align: center; for the .main-header. Probably you over loaded it with styles.

.main-header {
  text-align: center;
}

h1 {
  background-color: black;
  color: white;
  text-align: center;
  position: relative;
  background-size: 100px;
  display: inline;
  margin: auto;
  width: auto;
}

body {
  background-color: purple;
  margin: 0;
}

<div class="main-header">
  <h1>Welcome To Leindras's Gym Wiki</h1>
</div>

answered Jul 26 '22 at 21:43

IT goldman

14,885
2
14
28

I couldn't understand what you changed because I already have an "text-align: center;" – Leindras Jul 26 '22 at 21:47
Basically I removed (from the container) all the other styles. I think it's the `display:inline` on the container that made it not work because he wasn't 100% width anymore. – IT goldman Jul 26 '22 at 21:47
Finally, it's okay. I appreciate you friend. <3 – Leindras Jul 26 '22 at 21:49

Johannes · Answer 2 · 2022-07-26T21:57:36.553

Reduce/delete unnecessary CSS settings and use seperate rules for the .main-header element and the h1 inside it:

.main-header {
  text-align: center;
}

.main-header>h1 {
  background-color: black;
  color: white;
  display: inline;
}

body {
  background-color: purple;
  margin: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Lei's Gym Wiki</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <div class="main-header">
    <h1>Welcome To Leindras's Gym Wiki</h1>


  </div>

</body>

</html>

How can I put this h1 to center?

2 Answers2