Text not centred but was centred when I was testing it locally

The text “Click here for Kobe’s Full memorial” is what I’m referring too

Website link: https://marccodez.github.io/Kobe-Bryant-tribute-page/

HTML code

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style_sheet.css" />
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
		<link
			href="https://fonts.googleapis.com/css?family=Crimson+Text|Work+Sans:400,700"
			rel="stylesheet"
		/>
	</head>

	<body>
		<script
			type="text/javascript"
			src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"
		></script>
		<h1 id="title">Kobe Bryant</h1>

		<div id="main">
			<div id="img-div" class="w3-content w3-section">
				<p id="img-caption">
					"The most important thing is to try and inspire people so that they
					can be great in whatever they want to do." - Kobe
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe1.jpeg"
					/>
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe2.jpg"
					/>
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe3.jpg"
					/>
					<img
						id="image"
						class="mySlides w3-animate-fading responsive"
						src="kobe4.jpg"
					/>
				</p>
			</div>

			<script>
				//slow mo images script
				var myIndex = 0;
				carousel();

				function carousel() {
					var i;
					var x = document.getElementsByClassName("mySlides");
					for (i = 0; i < x.length; i++) {
						x[i].style.display = "none";
					}
					myIndex++;
					if (myIndex > x.length) {
						myIndex = 1;
					}
					x[myIndex - 1].style.display = "block";
					setTimeout(carousel, 4000);
				}
			</script>

			<div id="tribute-info">
				<h2>Dear Basketball - A Passion project by Kobe Bryant</h2>
				Dear Basketball,

				<p>From the moment</p>
				<p>I started rolling my dad’s tube socks</p>
				<p>And shooting imaginary</p>
				<p>Game-winning shots</p>
				<p>In the Great Western Forum</p>
				<p>I knew one thing was real:</p>
				<br />
				<p>I fell in love with you.</p>
				<br />
				<p>A love so deep I gave you my all —</p>
				<p>From my mind & body</p>
				<p>To my spirit & soul.</p>
				<br />
				<p>As a six-year-old boy</p>
				<p>Deeply in love with you</p>
				<p>I never saw the end of the tunnel.</p>
				<p>I only saw myself</p>
				<p>Running out of one.</p>
				<br />
				<p>And so I ran.</p>
				<p>I ran up and down every court</p>
				<p>After every loose ball for you.</p>
				<p>You asked for my hustle</p>
				<p>I gave you my heart</p>
				<p>Because it came with so much more.</p>
				<br />
				<p>I played through the sweat and hurt</p>
				<p>Not because challenge called me</p>
				<p>But because YOU called me.</p>
				<p>I did everything for YOU</p>
				<p>Because that’s what you do</p>
				<p>When someone makes you feel as</p>
				<p>Alive as you’ve made me feel.</p>
				<br />
				<p>You gave a six-year-old boy his Laker dream</p>
				<p>And I’ll always love you for it.</p>
				<p>But I can’t love you obsessively for much longer.</p>
				<p>This season is all I have left to give.</p>
				<p>My heart can take the pounding</p>
				<p>My mind can handle the grind</p>
				<p>But my body knows it’s time to say goodbye.</p>
				<br />
				<p>And that’s OK.</p>
				<p>I’m ready to let you go.</p>
				<p>I want you to know now</p>
				<p>So we both can savor every moment we have left together.</p>
				<p>The good and the bad.</p>
				<p>We have given each other</p>
				<p>All that we have.</p>
				<br />
				<p>And we both know, no matter what I do next</p>
				<p>I’ll always be that kid</p>
				<p>With the rolled up socks</p>
				<p>Garbage can in the corner</p>
				<p>:05 seconds on the clock</p>
				<p>Ball in my hands.</p>
				<p>5 … 4 … 3 … 2 … 1</p>
				<br />
				<p>Love you always,</p>
				<p>Kobe</p>
			</div>

			<div class="center">
				<a
					id="tribute-link"
					target="_blank"
					href="https://www.youtube.com/watch?v=oogOLnk5eg8"
					>Click here for Kobe's Full Memorial</a
				>
			</div>
		</div>
	</body>
</html>

CSS code:

img {
	width: 100%;
	max-width: 800px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* .imageBorder {
	border-width: 10px;
	border-style: solid;
	border-color: purple;
} */

#img-caption {
	font-style: italic;

	color: white;
	text-align: center;
}
#img-div {
	text-align: center;
	/* padding: 10px; */
	background-color: black;
	margin-bottom: 0;
	font-family: "Work Sans", sans-serif;
	max-width: 900px;
}

body {
	background-color: black;
	font-family: "Work Sans", sans-serif;
	margin: 0;
}

#main {
	background-color: #bebebe;
}

#title {
	color: white;
	text-align: center;
	padding: 0.5px;
	font-weight: 700;
}

#tribute-info {
	margin: auto;
	text-align: center;
	background-color: black;
	color: white;
	width: 800px;
	font-family: "Work Sans", sans-serif;
	margin-top: 0;
}

#tribute-link {
	margin: auto;
	text-align: center;
	font-weight: bold;
}

.center {
	margin: auto;
	width: 30%;
	padding: 10px;
	text-align: center;
}

it all looks centred to me apart from the very last line that is left aligned in its box.

The text “Click here for Kobe’s Full memorial” is what I’m referring too, would you know how to fix it