Flex box centering works in desktop but not quite in phone view-CodePudding

Using flexbox, the two separate sentences that make up the page are in the middle. However, when I view the site on my phone the second sentence is aligned along the left side. How the site looks on a phone

I've tried targeting the size using @media and center-align for specifically the second sentence unsuccessfully.

<!DOCTYPE html>
<html>
<head>
<title>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"> Jefferson's Virginia Website </p>
  <br>
  <p class="two"> In Process of Being Re-constructed </p>
</div>
</body>
</html>

CodePudding user response：

You need to add "text-align:center" to the wrapper CSS to keep wrapped text centered even when it wraps

.wrapper {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}