Small problem with element's shadow :(

The shadow does not take the exact width of an h2, instead it takes the full width of an viewport. Please, could you see my code.

<html>
  <head>
    <title>Drake - bio</title>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@1,200&display=swap" rel="stylesheet">
    <!-- <link> to css page -->
  </head>
  <body>
    <div id="main">
       <div id="main__child1">
         <h1 id="main__header"> Aubrey Drake Graham</h1>
         <p id="title"> The most streamed artist in the world</p>
       </div>
      <div id="img-div">
         <a href="https://lh3.googleusercontent.com/KSiqtfvl4zzp_AmdG4CCHGdZk4maHGXwoPz7e_3LNUTDH7EptifMsEH02F9xQkcKH8Livcog8fFG2i7ScgrwqB1z2-stbcvyr8YmliN5LIK0m1HLP8GJqOAUc8Jh33seXKler0471w=w2400?source=screenshot.guru"> 
        <img id="image" src="https://lh3.googleusercontent.com/KSiqtfvl4zzp_AmdG4CCHGdZk4maHGXwoPz7e_3LNUTDH7EptifMsEH02F9xQkcKH8Livcog8fFG2i7ScgrwqB1z2-stbcvyr8YmliN5LIK0m1HLP8GJqOAUc8Jh33seXKler0471w=w600-h315-p-k" alt="Drake"/>
        </a>
      </div>
       <div>
         <p id="paragraph__1"> Drake is the most streamed artist in the world according to Spotify. Streams exceeding over 80 billion. </p>
      </div>
      <div id="gray">
        <h2 id="child__of__gray1">Here is a timeline of Drake's life:</h2>
   


#main__child1 {
  margin-top: 90px;
  margin-left: 400px;
  text-align: center;
  margin-bottom: 50px;
  background-color: #f0f0f0;
  border-radius: 100px;
  width: 600px;
  font-family: "Fraunces";
  
}

#main__header {
  font-size: 45px;
  font-weight: bold;
}

#title {
  font-size: 20px;
}

#img-div {
  width: 40px;
  display: flex;
  justify-content: center;
  height: auto;
  margin-left: 400px;
  display: block;
  margin-right: auto;
  
}

#paragraph__1 {
  text-align: center;
  font-family: "Fraunces";
  justify-content: center;
}

#gray {
  background-color: #f0f0f0;
  padding-top: 50px;
  padding-bottom: 50px;
  font-family: "Fraunces";
}

#child__of__gray1 {
  text-align: center;
  text-decoration: underline dotted red;
  box-shadow: 559px 18px 20px  0px  #888888;

}

#child__of__gray2 {
  margin-left: 450px;
  margin-right: 470px;
}

The shadow of an element does not take the exact width of an h2, instead it takes the full width of viewport. Please help.

https://codepen.io/diyarcodes/pen/RwGerNY