Why 2 borders?

programming web dev
1

Hello
I seem to be getting two borders around server-generated text and I am not sure why! Please see attached screenshot.
The CSS I have in my <head> tags is this:
<style type=“text/css”>

@font-face {
font-family: Droid Sans;
src: url(’…/fonts/DroidSans-webfont.eot’);
src: local(“Droid Sans”), url(’…/fonts/DroidSans-webfont.woff’);
}

@font-face {
font-family: Jenna Sue;
src: url(’…/fonts/JennaSue-webfont.eot’);
src: local(“Jenna Sue”), url(’…/fonts/JennaSue-webfont.ttf’);
}

.center {

text-align: center;
color:#BD2CBB;
text-decoration: none;
font-style: normal;
font-weight: normal;
font-size: 14pt;
margin-left: auto;
margin-right: auto;
width: 80%;
border:solid 1px;

}</style>
and my HTML is:

Code:
 &lt;p class="center"&gt;you have successfully registered&lt;/p&gt;

I must be doing something wrong, but I am not sure what it is. There should be one centred box with a border which contains, for example, ‘brownFox, you have successfully registered’ on the one line.