Having trouble with aligning an image next to text-CodePudding

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 >
            <nav>
                <div >
                    <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 >
                    <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 >
                    <a href="#">Login</a>
                </div>
                <div >
                    <a href="#">Register</a>
                </div>
            </nav>
            <div >
                <div >
                    <h1>Make <br> remote work</h1>
                </div>
    
                <div >
                    <p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
                </div>
                <img  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:

And here's what I want it to look like:

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

CodePudding user response：

You can try this.

Replace the Hero Element with this.

<div >
  <div >
    <div >
      <h1>Make <br> remote work</h1>
    </div>

    <div >
      <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  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;
}