I have a paragraph on my website that contains a phone number and an email address within the header section. I have styled them to be the same font-size: small, but for some reason, the phone number appears slightly larger than the email address when viewed in my browser. How can I make them appear the same size (possibly by reducing the size of the phone number)? Here is how it currently looks:
HTML:
<div id="header_area">
<h1>
7seas Redovisning
<p id="contact_address_header">
Mob: 076-000000<br /> Tel: 000000<br />
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a43444c456a1d4b48494e4f4c4d4204594f">[email protected]</a>
</p>
</h1>
</div>
CSS:
#header_area{
background-image: url('img_ain/7seas.jpeg'),
url('img_ain/7seas.jpeg');
background-repeat: no-repeat,
no-repeat;
background-position: 220px top;
margin-top:10px;
}
h1{
text-align:center;
/*
margin-top:55px;
*/
color:green;
border-bottom:2px solid Crimson ;
box-shadow: 2px 2px 2px yellow;
padding-bottom:40px;
padding-top:45px;
font-family:Prisoner SF;
}
#contact_address_header{
float:right;
margin-right:40px;
margin-top:-15px;
color:#6495ED;
font-size: small;
font-family:Euphemia;
}