CSS border not auto setting itself next to the text

Question

So I decided to create a website to learn and expand on my programming knowledge for fun. I wanted to create some basic CSS styles I can use on different pages and wanted to have a title bar or rather box around the title of the page. I don't want this box to extend all the way to the end of the web page but that is all that is happening with the code I have now. As far as I knew using "width: auto" would solve the problem but it isn't else I wouldn't be here now.

Here is the CSS I am using right now

body{
    background-color: rgb(67, 63, 63);
    overflow: hidden;
    }
.titlebar {
    width: auto;
    color: rgb(67,63,63);
    text-decoration: none;
    background-color: rgb(248, 222, 126);
    border-color: rgb(248, 222, 126);
    border-style: solid;
    border-radius: 13px;
    
    
  }

The HTML I'm applying the div to (just this one line of text)

<body>
    <div class="titlebar">
        <h1>Welcome To My Website Project</h1>
    </div>
</body>

Below is an image of the problem as well. I don't need the yellow area to go all the way to the right only to the end of the text. enter image description here

I've tried setting the border width in multiple ways with auto and specific values. The values work but I'd like to use auto if I can

Set `display: inline-block;` on `.titlebar`; no need to set `width` — Anurag Srivastava, Nov 29 '22 at 19:17

score 0 · Accepted Answer · answered Nov 29 '22 at 19:17

Use width: fit-content:

body {
  background-color: rgb(67, 63, 63);
  overflow: hidden;
}

.titlebar {
  /*  */
  width: fit-content;
  color: rgb(67, 63, 63);
  text-decoration: none;
  background-color: rgb(248, 222, 126);
  border-color: rgb(248, 222, 126);
  border-style: solid;
  border-radius: 13px;
}

<body>
  <div class="titlebar">
    <h1>Welcome To My Website Project</h1>
  </div>
</body>

CSS border not auto setting itself next to the text

1 Answers1