Horizontal List Formatting - Separate Ul From Image

I'm trying to get a horizontal list formatted so the image is on the left side of the ul. Here's an idea of what I'm aiming for (green is the image, the x,y,z labels are to help r

Solution 1:

If you really insist on using your semantics, this is the solution I can come up with with the least possible changes in your code.

HTML

<ul class="menu"> #change id to class
    <li> #placed all the info you want on the left to a single li element
      <h2><u>Colby Abbott</u></h2>
      <p id="email">Enos.Goyette@hotmail.com</p>
      <p id="phoneNumber">360.751.0915</p>
    </li>
    <li> #right side
      <img src=https://i.imgur.com/9ZC02Oss.jpg >
    </li>
</ul>

CSS

ul.menu {
  border: 3px red solid;
  width: 400px;
}

ul.menuli {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float:left;
}


ul.menuliimg{
  display: inline;
  border: 3px solid green;
  float: right;
  width: 100px;
}

Then repeat this for all your sections.

Side note: I also removed the <br>s at the end of your li elements because they're unnecessary. I highly suggest reading up on Flexbox because it does exactly what you want.