u/atliseffect

I want the box to fit around my text but idk how to do that I tryed fit content but it didnt work :(

&lt;!DOCTYPE html&gt;
&lt;html lang=en&gt;
  
&lt;div class="box1"&gt;
  &lt;p3&gt;Hi my mane is Logan, but my online name is atliseffect. &lt;br&gt; I came here to escape the clutter of the modern day internet!&lt;/p3&gt;
&lt;/div&gt;
&lt;div class="box2"&gt;
  &lt;p3&gt;MY INTERSTS:&lt;/p3&gt;&lt;br&gt;
  &lt;ul&gt;
    &lt;li&gt;meteorology&lt;/li&gt;
    &lt;li&gt;skateboarding&lt;/li&gt;
    &lt;li&gt;html/css&lt;/li&gt;
    &lt;li&gt;math&lt;/li&gt;
    &lt;li&gt;room decortion&lt;/li&gt;
   &lt;li&gt; outfit &amp; hair style&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;style&gt;
.box1 {
  width: 300px;
  border: 2px solid white;
  padding: 2px;
  margin-left: 5px;
  margin-top: 10px;
  background-color: #000000;
}
.box2 {
  display: inline-block;
  border: 2px solid white;
  padding: 2px;
  margin-left: 5px;
  margin-top: 10px;
  background-color: #000000;
}
  body {
  color: #ffffff;
  background-image: url("https://media.rainpos.com/Checker/0552-0570.jpg");
    font-family: "courier", cursive;
}
&lt;/style&gt;
&lt;/html&gt;

BIG UPD I WANT YOU GUYS TO SEE

I really need help with this and AI is my last resort (i hate AI)