照片放置不完美

I'm having problem placing the laptop image over the yellow vector thing. I tried doing flexbox too, but everything goes out of place if I try to move the laptop there. Can someone help me place the laptop on that yellow thing and the header text in baseline with laptop. as you can see in the photo, laptop photo is below where i wanted, i want it to be little above, the work faster and harder to achieve your goal line to be little below in the middle and the logo is also not placed perfectly. I want the design text to get out of the yellow circle

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Title</title>
</head>

<body>
    <header>
        <nav>
            <a href=""><img src="./images/ex.png" alt="" style="height: 52px; width: 58px;" /></a>
            <a href="#">Design</a>
        </nav>
        <h1>Work fater and harder to achieve your goals</h1>
        <p>hello I waant this tagline</p>
        <img src="./images/laptop.png" width="750px" height="500px" alt="" />
    </header>

</body>

</html>
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

html {
    font-family: Circular Std, sans-serif;
}

body {
    width: 100%
}

h1 {
    font-size: 48px;
    font-weight: 100;
    color: #2B9Dff;
}

h3 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

nav {
    line-height: 150px;

}

nav a {
    text-decoration: none;
    color: #202427;
    font-size: 20px;
    font-weight: 700;

}

nav a:first-child {
    float: left;
}

nav a:second-child {
    padding-left: 20px
}

nav a img {
    vertical-align: middle;
}

nav a span {
    background-color: #2b9dff;
    padding: 5px 5px;
    border-radius: 1000px;
    font-weight: 100;
    color: white;
    margin-left: 7px;
}

header {
    height: 1000px;
    min-height: 1000px;
    padding: 0 5%;
    background-image: url(images/eclipse1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
}

header h1 {
    width: 40%;
    margin: 2em 0 0 0;
}

header img {
    margin-left: 50%;
}

enter image description here