How can I make the text centered under the Yoga Classes heading?

Question

HTML-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio:: Classes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<br>
<nav>
<a href="index.html">Home</a>
<a href="classes.html">Classes</a>
<a href="schedule.html">Schedules</a>
<a href="contact.html">Contact Us</a>
</nav>
<main>
<div id="hero">
<img id="yogamat" src="yogamat.jpeg" alt="yogamat picture" width="80%" height="25%">
<h2>Yoga Classes</h2>
<h3>Gentle Hatha Yoga</h3>

Intended for beginners and anyone wishing a grounded<br>

foundation in the practice of yoga, this 60 minute class of<br>

poses and slow movement focuses on asana (proper<br>

alignment and posture), pranayama (breath work), and<br>

guided meditation to foster you mind and body connection.

</p>

<h3>Vinyasa Yoga</h3>

</div>
<p class="indent">

Although designed for intermediate to advanced students, <br>

beginners are welcome to sample this 60 minute class that<br>

focuses on breath synchronized movement - you will<br>

inhale and exhale as you flow energetically through yoga poses.

</p>

<h3>Restorative Yoga</h3>

This 90 minute class features a very slow movement and long<br>

poses that are supported by a chair or wall. This calming,<br>

restorative experience is suitable for students of any level of<br>

experience. This practice is can be a perfect way to help rehabilitate an injury.

</p>

<br>
<br>
<footer>
<small> <i> Copyright © 2018 Path of Light Yoga Studio<br> <a href+"mailto:jacalynn@mayfield.com>Jacalynn@mayfield.com</a> </i> </small>
</div>
</footer>
</body>
</html>

CSS-

* {box-sizing: border-box;}

body {background-color: #3F2860;
font-family: Verdana,Arial, sans-serif;
color:#3F2860;}

#wrapper {background-color:#F5F5F5;
width:80%;
min-width:1200px;
max-width : 1480px;
margin-left : auto;
margin-right : auto;
color:#3F2860;}

#main {margin-left:170px;
padding-top:1em;
padding-right:2em;
Padding-left:1em;
background-color:#F5F5F5;
height: 500px;}

h2
{
margin-top:0px;
}

#nav{ float:left;
height:500px;
width:25%;
position:relative;
width:160px;
padding:1em;}

#image {float:left;
width:30%;
position:relative;}

span{
margin-left: 40px;
font-size: small;
}

#des{
float: right;
width: 70%;
position: relative;
}

#mathero { height: 300px;
background-image: url("yogamat.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}

#loungehero { height: 300px;
background-image: url("yogalounge.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}

header {background-color: #9BC1C2;
background-image: url("lilyheader.jpeg");
background-repeat: no-repeat;
background-position: right;
height: 150px;}

h1 {line-height:200%;
padding-top: 50px;
padding-left: 2em;}

nav {font-weight: bold;
text-align:center;
Padding: 1em;
float:Left;
width:190px}

nav ul {list-style-type:none;
padding-left:0;
font-size:1.2em;}

nav a {text-decoration: none ;
display: block;
text-align:center;
font-weight:bold;
border: inset 3px #CCCCCC;
padding:1em;
margin-bottom:1em;}

#yogamat { float: center;
margin: 0 0 5px 5px;
border: 1px solid #000000;
}

nav a:link {color:#3F2860;}

nav a:visited {color:#497777;}

nav a:hover {color:#A26100;
border:3px inset #333333;}

clear { clear:both;}

footer {background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;}

li {line-height: 90%;
padding-left: 0;
font size: 1.2em}

header, nav, main, footer { display: block; }