Why does the text in the header doesn't fill it's box?

Question

I'm relatively new to coding and I am struggling to make the text fill the box. When I increase font size- the font gets bigger and so does the purple box so the text always ends up looking too small.

   #header {

background: #9800A3;
border-radius:10px;
border: 1px solid #84008f;
margin: 5px;
font-family: "Georgia";
text-align:center;
font-weight:bold;
font-size:3em;
font-size-adjust: auto;}

Please add part of the code with which you're struggling. – Siddharth Jun 27 '20 at 19:55 — Siddharth, Jun 27 '20 at 19:55

score -1 · Answer 1 · answered Jun 27 '20 at 20:08

I think you're using either the div or header tag in the html file, both of them are block elements.

You need to make it inline-block element so that it takes up width based on the content.

This answer might help you in understanding display properties more.

#header {
  background: #9800A3;
  border-radius: 10px;
  border: 1px solid #84008f;
  margin: 5px;
  font-family: "Georgia";
  font-weight: bold;
  font-size: 3em;
  font-size-adjust: auto;
  display:inline-block;
}

<header id="header">abcd</header>

Why does the text in the header doesn't fill it's box?

1 Answers1