Email won't align with other Header elements


#1

I've tried small and extreme px and ems for margins, borders, and paddings to push it back in. I've set various items to text:align right, center, and left. I've also tried float right and discovered it added more space between. This is as bare as I got the code so that the answer may hopefully jump out.

The left, right, and footer CSS are not written in yet.

https://www.codecademy.com/en/courses/web-beginner-en-9x6JW-WnAFv/0/7?curriculum_id=50579fb998b470000202dc8b

No error messages. Just aesthetically underwhelmed.

HTML

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	<div id="header">
	<p id="name">OnyxCygnus</p>
	<p id="position">Coding Apprentice</p>
	<a href=mailto:example@gmail.com<p id="email">wontinline@gmail.com</p></a>
	</div>

<div class="left">
		<h3>Skills</h3>
	</div>
	<div class="right">
	<ul>
	<li>Learning the basics of HTML</li>
	<li>Learning front-end web page display</li>
	<li>Color theorist with keen eye for pigment</li>
	<li>Trend-watcher,as side-effect of non-conformist teenage years</li>
	<li>Eager to work and understand how to set up this code elegantly and cleanly</li>
	</ul>
	</div>
	<div id="footer"></div>
	</body>
</html>

CSS

div{
    border-radius:5px;
    }
#header{
    background-color:#d0d1ca;
    width:88%;
    text-align:center;
    margin-top:-12px;
    height:44px;
    position:fixed;
    z-index:1;
    }
#name{
    font-weight:bold;
    font-size:18px
    font-family:Arial;
    float:left;
    margin-left:10px;
    margin-top:.8em;
    }
#position{
    font-weight:bold;
    font-size:20px
    }
#email{
    text-decoration:none;
    color:yellow;
    background-color:red;
    }    
a:hover{
    font-style:italic;
    font-weight:bold;
    font-size:16px;
    }

Thank you so much kind people.


#2

first off, take a look at this line:

<a href=mailto:example@gmail.com<p id="email">wontinline@gmail.com</p></a>

your email address is not inside quotation marks ("), and the anchor opening tag (<a>) is missing its >

you want to align them inside the header? The two easiest ways, would be be giving you #name, #position and a p either float: left; or a display: inline-block, make the width of each element 33%, and use text-align: center; where needed. If you need further help with this, let me know