Text alignment to make a logo with HTML & CSS issue

So I'm making a website for college, and I'm trying to add a logo to my header.
My logo isn't a picture, it's just 2 letter's using a fancy font from Google's web fonts.
And I can't get it to position properly. I am new, so it could be really obvious.


<header id="banner">
<hgroup id="logo">
	<aside id="logoPic">JS</aside>
	<h1 id="logoH1">John Smith</h1>
	<h2 id="logoH2">Web Development Assessment 1</h2>


height: 100px;
width: 100%;
background-color: #42A5F5;
color: white;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);



margin-left: 10%;
float: left;
padding: 20px;
padding-left: 0px;



float: far-left;
padding-top: 0;
line-height: 1em;
font-weight: normal;
font-family: 'Monoton', cursive;
font-size: 2em;



float: center;
padding-top: 0;
line-height: 1em;
font-weight: normal;



text-transform: uppercase;
font-size: 1.2em;
line-height: 1em;
font-weight: normal;


What it looks like.

What I want it to look like.

Float your H1 and H2 to the right and within your CSS for banner set a maximum width in terms of pixels, not percentage.

1 Like

Another alternative to what you already have is to use a table to achieve the same result.

		<td rowspan="2" id="logoPic">JS</td>
		<td id="logoH1">John Smith</td>
	        <td id="logoH2">Web Development Assessment 1</td>
1 Like

Thanks everyone!
Got it all sorted, but I'll take what you've all said into future web development.