Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
How do i make the text ‘Handcrafted Home-made footgear’ to be beside the shoe icon not below it. i have tried using float left its not working help me

Your code so far

<!-- file: index.html -->
<DOCTYPE html>
  <html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"     content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles.css">

      Essence Footwear
      <section class="nav">
        <section class="header">
          <header id="header">
            <img id="header-img" src=""> 
            <h1><span class="right">Handcrafted Home-made footgear </span></h1>
        <section class="price-list">

/* file: styles.css */

#header-img {
  width: 50px;
  object-fit: contain

.header {
  display: flex;
.right {
  float: left;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

I see the css selector is for the classname header, however, there is no classname header in your project. You’re probably meaning to use the selector #header.

1 Like

I think you would put the float on the image since that’s what you want the text to float around. But really, I probably wouldn’t use float here. I’d probably use flexbox.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.