How to make the width to fit the text, and not be the full width with Bootstrap-CodePudding

Here I have a title which I put into a row so it will take specific height. It is working, but the problem is that my h1 is taking the whole row. I mean that I want the width of my text to be only as wide as the text is and not to be the same width with the parent row. Do you know any way how I can do this?

    
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Survey Creato</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2 k9luXQOfXJCJ4I"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
  </head>

  <body style="background-color: rgb(0, 0, 0)">
    <div style="height: 120px">
      <div  style="background-color: rgb(255, 255, 255)">
      </div>
      <div
        
        style="background-color: rgb(134, 188, 37)"
      ></div>
    </div>
    <div >
      <div
        id="survey"
        
        style="height: 600px; width: 1000px; background-color: white"
      >
        <div >
          <h1
            
            contenteditable="true"
          >
            Survey Name
          </h1>
        </div>
      </div>
    </div>
  </body>

CodePudding user response：

I think using width: fit-content should do the trick

h1 {
    width: fit-content;
}

CodePudding user response：

I changed

     <div >
              <h1
                
                contenteditable="true"
              >
                Survey Name
              </h1>
     </div>

    <div >
              <h1
                
                contenteditable="true"
                style="width: fit-content"
              >
                Survey Name
              </h1>
    </div>

Basically I added justify-content-center class to my row, and then style="width: fit-content" to my header.