Float img next to form

by Bryan Waddington

HTML

<div id="wrapper">
  <header>
    <h1>Dungeons and Dragons: WCTC</h1>
  </header>
  <main class="clearfix">
    <nav>
      <ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="resources.html" class="button">Resources</a></li>
        <li><a href="joining.html" class="button">Join Us!</a></li>
      </ul>
    </nav>
    <div id="joiningcontent">
    
      <h2>If you wish to join, provide us with some information so we can contact you!</h2>
     
      <form id="join-form">
        <label for="FirstName">First Name:</label>
        <input type="text" id="FirstName" name="FName" required>
        <label for="LastName">Last Name:</label>
        <input type="text" id="LastName" name="LName" required>
        <label for="emailboi">Email:</label>
        <input type="email" id="emailboi" name="Email" required>
        <label for="GuestOrMember">Are you signing up as a Guest?</label>
        <input id="GuestOrMember" type="checkbox">
        <button type="submit" value="submit">Submit</button>
      </form>
       <img src="assets/signuppic.png" id="joiningpic">
      
    </div>
  </main>
</div>

CSS

header {
  background-color: #030303;
  color: #ffffff;
  height: 60px;
  text-align: left;
  padding-top: 30px;
  padding-left: 3em;
  background-image: url("assets/dndlogo.jpg");
  background-repeat: no-repeat;
  background-position: right;
}

#dndlogo {
  float: right;
  height: 50px;
}

header h1 {
  font-family: Georgia, "Times New Roman", Serif;
  margin-top: 0px;
  font-size: 3em;
  letter-spacing: 0.25em;
}

#schedulebox {
  float: left;
  height: 750px;
  width: 15%;
  float: left;
  background-color: #bd0202;
  text-align: center;
}

#homecontent {
  height: 750px;
  width: 84.3%;
  float: left;
  background-color: #030303;
  color: white;
}

nav {
  overflow: hidden;
  background-color: #030303;
  font-family: Arial;
  float: top;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}

nav li {
  float: left;
  font-size: 20px;
  color: black;
  text-align: center;
  padding: 15px 20px;
  text-decoration: none;
  list-style-type: none;
  color: white;
  height: 15px;
}


/*nav li:hover{
    background-color: white;
    border-radius: 15px;
    transition: 0.5s;
    color: black;
}*/

nav ul {
  margin: 0;
  padding-bottom: 10px;
  padding-left: 0;
}

footer {
  background-color: #030303;
  float: bottom;
  color: white;
}

#schedulebox h1 {
  border-bottom: solid;
  padding-top: 0;
  margin: 0;
}

html {
  background-color: #030303;
}

button {
  background-color: #030303;
  border: none;
  color: white;
  font-size: 20px;
  height: 27px;
}

button:hover {
  background-color: white;
  color: #030303;
  border-radius: 5px;
  transition: 0.5s;
}

main {
  border: white solid;
  border-radius: 10px;
  order-radius: 10px;
}

#wrapper {
  padding: 20px;
}

#schedulebox {
  border-right: white solid;
}

#dragonpic {
  width: 1556.5px;
  height: auto;
}

#homecontent2 {
  border: solid white;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#homecontent h2,
#homecontent h3 {
  padding-left: 10px;
}

#resourcescontent {
  color: white;
 ...