I'm having trouble with my code overlapping in sections, and I just can't seem to figure out why. I've tried adjusting borders, adding padding, adjusting spaces, changing widths, reviewing the code, and even removing absolute positions, but nothing seems to work. The speech bubbles that I'm working with don't necessarily need to be interactive, but I do need them to have the same width and different heights. I also need a small gap between each bubble, but right now there's no gap at all.
<!DOCTYPE html>
<!-- Author: Lorna Costelloe -->
<html>
<head>
<meta charset = "utf-8">
<title>Speech Bubble</title>
<style media="screen" type="text/css">
.speech-bubble{
background-color: #f4911c;
border: 3px solid #662f8c;
border-radius: 5px;
width: 500px;
text-align: center;
padding: 20px;
position: absolute;}
.speech-bubble .arrow {
border-style: dotted;
position: absolute;}
.bottom {
border-color: #662f8c transparent transparent transparent;
border-width: 8px 8px 0px 8px;
bottom: -8px;}
.bottom:after {
border-color: #f4911c transparent transparent transparent;
border-style: dotted;
border-width: 7px 7px 0px 7px;
bottom: 1px;
content: "";
position: absolute;
left: -7px;}
</style>
</head>
<body>
<!--copy and paste this for a new speech bubble.
<div class="speech-bubble">
<div class="arrow bottom right">
</div>
CONTENT HERE.
</div>-->
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Insert your content here.
</div>
<br><br>
<div class="speech-bubble">
<div class="arrow bottom right">
</div>
More content goes here.
</div>
</body>