u/atliseffect

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

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

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

<style>
.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;
}
</style>
</html>
u/atliseffect — 5 days ago