How to push my Home(a) element to the top-left of my header and page???

Here is the code I have so far, not sure what to do to get the home button to the top left of the page.

<body id=“head”>
<header>
<img src=“images/chefs-hat.png”>
<p>Popular Recipes</p>
<button class=“home”>
<a href=“index.html”>Home</a>
</button>
</header>
</div>

.home {
width: 100px;
text-decoration: none;
float: left;
display: block;
font-size: 20px;

}

Hi @iamseanhooker,

There are lots of different ways that you can get that element moved to the top left depending on what you want to do with the surrounding elements. The easiest thing to do would be to put the HTML for your Home button above the HTML for the other elements since it will then render first.

If you want to know other ways to position elements in HTML and CSS, I personally recommend checking out Chris Coyier’s CSS-Tricks website. That’s how I learned a lot of the CSS knowledge that I have.

Best of luck!

1 Like

Move the <button> element two lines up.