Having trouble with aligning an image next to text

Issue

I’m trying to align an image next to some text on my webpage without using any position properties like right:, left:, top:, and bottom: but I just can’t align it the way I want

    body {
        background-color: #fafafa;
        font-family: Epilogeal, sans-serif;
    }
    
    
    .main {
        padding: 20px;
        overflow: hidden;
    }
    
    nav {
        width: 100%;
        position: sticky;
        display: flex;
    }
    
    .nav-links {
        flex: 1;
        text-align: left;
        padding-left: 50px;;
    }
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    li {
        display: inline;
        padding-left: 50px;
    }
    
    a {
        text-decoration: none;
        color: hsl(0, 0%, 41%);
        font-family: Epilogeal, sans-serif;
    }
    
    .register-btn {
        border: 2px solid hsl(0, 0%, 41%);
        border-radius: 15px;
        padding: 10px;
        width: 4%;
        text-align: center;
        position: fixed;
        right: 60px;
        top: 16px;
    }
    
    .login-btn {
        color:hsl(0, 0%, 41%);
        position: fixed;
        right: 215px;
    }
    
    .hero {
        padding: 150px;
    }
    
    .hero-header {
        color: hsl(0, 0%, 8%);
        font-size: 50px;
    }
    
    .hero-text {
        color: hsl(0, 0%, 41%);
        font-size: 18px;
        float: left;
    }
    
    .image {
        width: 700px;
        height: 700px;
        float: right;
        margin-bottom: 100px;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="https://fonts.google.com/specimen/Epilogue">
        <title>Document</title>
    </head>
    <body>
        <div class="main">
            <nav>
                <div class="logo">
                    <img src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\logo.svg" alt="logo">
                </div>
                <div class="nav-links">
                    <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Company</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
                <div class="login-btn">
                    <a href="#">Login</a>
                </div>
                <div class="register-btn">
                    <a href="#">Register</a>
                </div>
            </nav>
            <div class="hero">
                <div class="hero-header">
                    <h1>Make <br> remote work</h1>
                </div>
    
                <div class="hero-text">
                    <p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
                </div>
                <img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image">
            </div>
        </div>
    </body>
    </html>

Here’s what my webpage looks like:
enter image description here

And here’s what I want it to look like:
enter image description here

I’m not good with positioning stuff in CSS, so any help would be much appreciated!

Solution

You can try this.

  1. Replace the Hero Element with this.
<div class="hero">
  <div class="hero-left">
    <div class="hero-header">
      <h1>Make <br> remote work</h1>
    </div>

    <div class="hero-text">
      <p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch
        productivity soar.</p>
    </div>
  </div>
  <img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image" />
</div>

and CSS of .hero selector with

.hero {
    padding: 150px;
    display: flex;
    justify-content: space-between;
}

Answered By – Shrikant Yadav

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.