Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated.
Here's the HTML:
<body>
<section>
<section id="pictures">
<div>
<img src="images/ritual4.jpg" id="slide" class="floatLeft" alt="Group of young men posing and smiling">
<script language="JavaScript">slideIt();</script>
<p>Ritual and Mills Music Mission</p>
<img src="images/ossian.jpg" alt="Group of dressed up men posing with an older gentleman.">
<p>Spaghetti Dinner Fall 2015</p>
</div>
</section>
<section id="main">
<h1>About Phi Mu Alpha</h1>
<hr>
<div>
<p id="text">Phi Mu Alpha Sinfonia:</p>
<p id="text1">Phi Mu Alpha Sinfonia was established on October 6th, 1898</p>
<p id="text">
Gamma Beta Chapter:
</p>
</section>
</section>
</div>
</body>
CSS styling:
#main h1{
text-align: center;
font-size: 28px;
}
hr{
color:#FFFFFF;
}
#main #text{
text-indent: 5%;
font-family: courier new, Georgia, Times;
padding-left: 15px;
padding-right: 15px;
font-size: 20px;
text-decoration: underline;
}
#main #text1{
text-indent: 5%;
font-family: courier new, Georgia, Times;
padding-left: 15px;
padding-right: 15px;
font-size: 16px;
text-decoration: underline;
}
body #main p{
text-indent: 8%;
font-family: courier new, Georgia, Times;
padding-left: 15px;
padding-right: 15px;
font-size: 18px;
text-decoration: underline;
}