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;
}