Header (h1) takes up a lot space to the right

Question

For some reason, as can be seen in the screenshot, the h1 (discordbotgen) takes up a lot of space to the right, whilst not specified in my css. I don't want it taking that space, as it blocks other elements from going there.

.main-title {
  font-family: 'Comfortaa', cursive;
  font-size: 80px;
  color: #ededed;
  margin-bottom: 50px;
  margin-left: 150px;
  margin-top: 180px;
}

<h1 class="main-title">discordbotgen</h1>

The h1 doesn't have any parent divs, it's parent is <body>.

Headers will always take up the whole width of their container. I would suggest wrapping it in a `div` and handle position using that div — Max Baldwin, Feb 04 '19 at 15:35
thank you for asking this I couldn't quite articulate what the problem was. — Mystery Man, Oct 04 '22 at 19:17

score 5 · Accepted Answer · edited Feb 04 '19 at 16:49

5

<h1> is display-block by default - It will take up the whole width of its containing element. You can float it or use inline-block to change that functionality.

p.s. If you use floats dont forget to use clearfix. Clearfix

edited Feb 04 '19 at 16:49

nstanard

593
3
12

answered Feb 04 '19 at 15:36

DriveItLikeYouStoleIt

622
1
7
20

score 2 · Answer 2 · answered Feb 04 '19 at 15:36

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

By default <h1> is a block level element. It will take up the full width of it's container unless you specify it to be inline-block.

h1 {
  background: #f2f2f2;
}

<h1>Block Element</h1>

h1 {
  background: #f2f2f2;
  display: inline-block;
}

<h1>Block Element</h1>

Header (h1) takes up a lot space to the right

2 Answers2

Linked