Utilizing flexbox, the two distinct sentences that form the content of the page are centered. However, upon viewing the website on my mobile phone, the second sentence appears aligned to the left side. Here's how the site appears on a phone
I've made attempts at adjusting the size using @media queries and tried center-aligning specifically for the second sentence without success.
<!DOCTYPE html>
<html>
<head>
<title>Exploring Jefferson's Virginia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
height: 100%;}
body {
background-color: #999;}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
p.one {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
p.two {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
</style>
</head>
<body>
<div class="wrapper">
<p class="one"> Discovering Jefferson's Virginia Website </p>
<br>
<p class="two"> Currently Undergoing Reconstruction </p>
</div>
</body>
</html>