Текст не соответствует форматированию CSS при добавлении контента ниже

Пожалуйста, имейте в виду, что я новичок в коде!

Поэтому у меня есть заголовок и некоторый текст, который я хочу разместить поверх фонового изображения, которое у меня есть с использованием CSS, поэтому позиционирование является ключевым.

Все работало нормально, пока я не добавил больше HTML-контента ни под текстом. Из этого было, как если бы текст не собирал мои инструкции CSS.

HTML:

 <div id="sidemicro">
 <text class="circleheader"><h3>Special Occasion?</h3><p>Give us a call and </br> we'll see how     we can make </br> your tour  extra special!</p></br> 

Это текст, который мне нужно форматировать:

 <div id="form">
 <form action ='otterabout.php' method='POST'>
*Your Name: <input type='text' name='name'><br />
*Your Email: <input type'text' name='email'><br />
*Date of visit: <input type'date' name='date'><br />
*Time of visit: <input type'time' name='time'><br />
*Group Size: <input type'text' name='groupsize'><br />
<input type='submit' name='submit' value='Login'>
<input name='reset' type='reset' value='Reset'>
</form>
</div>
</div>

Это содержимое под текстом, которое остановило его форматирование.

CSS:

.circleheader {
margin-top:70%;
margin-left:15%;

}



.circletext {
text-align:center;
margin-left:35%;
}

Благодарю!