Why my "width: auto" is not taking the auto width of content?

Question

My css code, width: auto is not taking the content witdh

First of all, i am a completely begginer starting in html code and stuff like that (css and js). Cleared that up, i need some help with my website: I have a few divs within a <section>, but the section width is not taking the width of its content (i mean, taking the divs). Basically,i want the section width take the width of its content. Besides, the #blockp is taking more width than its p elements.By the way, I'm using "border" because I wanted to see what happened. Gonna show you guys my HTML and CSS. I hope you guys help me, cause it's a little bit frustating but i'm fascinated with this amazing new world. Also, i think i'm using id's and classes wrongly.

body {
  background: #fffdeb;
}

#secpri {
  margin-left: 10%;
  margin-right: 10%;
  width: auto;
  height: auto;
  border: 2px solid #0a0a23;
  box-sizing: border-box;
}

#block {
  display: inline-block;
  justify-items: center;
  vertical-align: middle;
  width: auto;
}

.headblock {
  width: 100px;
}

.firstul {
  width: auto;
  border: 0.5px solid #0a0a23;
}

.secondul {
  width: auto;
  border: 0.5px solid #0a0a23;
}

#blockp {
  width: auto;
  border: 0.5px solid #0a0a23;
}

#secpri #blockp {
  font-size: smaller;
}

<section id="secpri">
  <div id="block" class="headblock">
    <h2>TÍTULO</h2>
  </div>
  <div id="block" class="firstul">
    <ul>
      <li>PRIMERA LÍNEA</li>
      <li>SEGUNDA LÍNEA*</li>
      <li>TERCERA LÍNEAs</li>
      <li>CUARTA LÍNEA</li>
    </ul>
  </div>
  <div id="block" class="secondul">
    <ul>
      <li>QUINTA LÍNEA</li>
      <li>SEXTA LÍNEA**</li>
      <li>SÉPTIMA LÍNEA</li>
      <li>OCTAVA LÍNEA</li>
    </ul>
  </div>
  <div id="blockp">
    <p>*PÁRRAFO POR INSERTAR.</p>
    <p>**PÁRRAFO POR INSERTAR.</p>
  </div>
</section>

Answer 1

Try to use width: fit-content; on your section which is secpri