My css code, width: auto is causing issues with the content width
I am a beginner in HTML, CSS, and JavaScript, seeking help with my website. I have multiple divs within a section element, but the section's width is not adjusting to fit the divs properly. Essentially, I want the section to take the width of its content. Additionally, the #blockp element is wider than its p elements. I added borders to see what was happening. Here is my HTML and CSS code. Any assistance would be greatly appreciated as I navigate this exciting new field. It's possible that I am misusing IDs and classes.
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>TITLE</h2>
</div>
<div id="block" class="firstul">
<ul>
<li>FIRST LINE</li>
<li>SECOND LINE*</li>
<li>THIRD LINE</li>
<li>FOURTH LINE</li>
</ul>
</div>
<div id="block" class="secondul">
<ul>
<li>FIFTH LINE</li>
<li>SIXTH LINE**</li>
<li>SEVENTH LINE</li>
<li>EIGHTH LINE</li>
</ul>
</div>
<div id="blockp">
<p>*PARAGRAPH TO INSERT.</p>
<p>**PARAGRAPH TO INSERT.</p>
</div>
</section>