Aligning text that has wrapped around

HTML-CSS
1

So as you can see, the text that is wrapping around based on the width I set for the div is not aligning. The text that is appearing on the next line is aligning to the ribbon image, not to the text on the previous line:

Screenshot 2024-02-25 at 8.39.11 PM
Screenshot 2024-02-25 at 8.39.11 PM1613×613 104 KB

I want to align the text so that, for example, “Lower” and “teachers” both align with each other. My source code is below:

* {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Quicksand', sans-serif;
  }

  ul {
    list-style: none;
  }
  nav,
  .nav-links {
    display: flex;
  }
  
  nav {
    justify-content: space-around;
    align-items: center;
    height: 17vh;
  }
  
  .nav-links {
    gap: 2rem;
    font-size: 1.2rem;
  }

  .main_logo {
    max-width: 100px;
  }

  a {
    color: black;
    text-decoration: none;
    
  }
  
  a:hover {
    color: grey;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-decoration-color: grey;
  }

hr {
    opacity: 20%;
}

.first_block {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:3px;
}

.first_block_image {
    max-width: 400px;
    border-radius: 10%;
    margin-left: 10px;
    margin-top: 5px;
}

.ribbons {
    max-width: 20px;
}

.hype_list {
    
    max-width: 300px;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
    <title>Home - Eigo Team</title>
</head>
<body>
    <header>
        <nav id="desktop-nav">
            <div class="logo"><img class="main_logo" src="main_logo.png" alt=""></div>
                <div>
                <ul class="nav-links">
                    <li><a href="#about">About</a></li>
                    <li><a href="#experience">Help/Contact</a></li>
                    <li><a href="https://preply.com/en/tutor/4198558">Sign Up</a></li>
                    <li><a href="#contact">Sign In</a></li>
                </ul>
            </div>
        </nav>
        <hr>  
    </header>
    <div class="first_block">
        <div class="hype_list">
            <ul>
                <li><img class="ribbons" src="ribbon.png" alt="">Lower commissions means happier teachers</li>
                <li><img class="ribbons" src="ribbon.png" alt="">Take private lessons or join your favorite teacher's group lectures</li>
                <li><img class="ribbons" src="ribbon.png" alt="">Take as many or as few lessons as you like</li>
            </ul>
        </div>
        <div><img class="first_block_image"  src="first block.png" alt="picture of a woman teaching"></div>
    </div>  
</body>
</html>
2

Welcome to the forum @wfra9486

Try this code, wrapping the li text in span elments.

li, span {
display: flex;
}

You may need to set the height property for the .ribbons class.

Happy coding

3

Hi! For more accurate help also povide link to this ribbon image

1 Like
4

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