Jak przesunąc elementy spod zdjęcia na prawo od zdjęcia?

pytanie zadane 12 stycznia 2020 w HTML i CSS przez must Bywalec (2,980 p.)

Cześć. Chce by moja strona wygladała tak jak na tym zdjęciu:

https://zapodaj.net/266d1cddd67f9.png.html

Teraz wygląda niestety tak:

zapodaj.net/2177744574c14.png.html (trzeba chyba przekleić link a nie klikać, bo wtedy strona nie działa, pokazuje ze nie ma uploadu)

Oto kod css:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  height: auto;
  width: auto;
  background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}

#logo {
  text-align: center
}

.backbutton li {
  display: inline-block;
}

.backbutton li a {
  background: #2699FB 0% 0% no-repeat padding-box;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  font: Bold 25px/12px Arial;
  color: #FFFFFF;
  padding: 8px;
  position: absolute;
  top: 35px;
  right: 35px;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

footer img {
  margin-top: 5px;
  height: 30px;
  display: inline-block;
  padding: 0px 10px 0px 0px;
}

.left {
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 150px 150px;
}

img.left {
  float: center;
  padding: 0px 40px;
  width: 30%;
  margin-left: 100px;
  margin-top: 50px;
}

article input {
  width: 300px;
  height: 40px;
  background: white;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  font: Bold 25px/12px Arial;
  border-radius: 120;
  border-style: none;
  padding: 5px;
}

article #textSign {
  font-size: 50px;
  color: black;
  text-align: center;
}

#centerText {
  text-align: center;
}

#textUnderInput {
  text-align: center;
  padding: 3px 125px;
  color: black;
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
}

i html:

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

<head>
  <meta charset="UTF-8">
  <title>DingDog</title>
  <link rel="stylesheet" href="css-images/style-signin.css">
</head>

<body>
  <p id="logo"><img src="css-images/dingdog-logo.png"></p>
  <ul class="backbutton">
    <li id="BACK"><a href="index.html">BACK</a></li>
  </ul>
  <section>
    <article>
      <div class="box">
        <div class="box-child">
          <img class="left" src="css-images/signindog.jpg" alt="coach picture" />
        </div>
        <div class="box-child" action="Podstrony/settings.php" method="post">
          <p id="textSign">Signing in</p>
          <p id="centerText">
            <label><input type="email" name="email" placeholder="Email" style="margin-top: 30px;" ></label><br/>
            <label><input type="password" name="password" placeholder="Password" style="margin-top: 10px;"></label><br></p>
          <p id="textUnderInput">Drop password?</p>
          <label id="submit"><input type="submit" name="continue" value="Continue" style="margin-top: 40px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
        </div>
        <p id="textSign" style="margin-top: 40px; font-size: 40px; ">DO NOT HAVE THE ACCOUNT? CREATE IT!</p>
        <p id="centerText">
          <a href="Podstrony/createAnAccount.html"><label ><input type="button" name="create" value="CREATE NEW ACCOUNT" style="margin-top: 10px; background: #2699FB 0% 0% no-repeat padding-box; width:400px"></label></a>
        </p>
      </div>
    </article>
  </section>

  <footer>
    <img src="social/instagram.png" />
    <img src="social/twitter-white-logo.png" />
    <img src="social/facebook.png" />
  </footer>
</body>

</html>

Wiecie jak to poprawić moze?