Trouble with img and text in Innovation Cloud project


I'm trying to get my image to resize in the Innovation Cloud project so that it fits to the left of the text like the example they show here: (due to me being a new user I can only post one image so here is the imgur link to their example):

The code I tried to use for that gives me this result: (My page)

Link to project:

My current code for the image:

.main img {
  height: 30%;
  width: 30%;
  float: left;

Another issue I'm having is trying to get my text in the .nav section to look like it does in the example (slightly to the left) while mine is centered. The current code I have for that is:

/* Nav */
.nav ul {
  word-spacing: 10px;
  color: white;
	list-style: none;
	margin: 0 auto; 
	padding: 30px 0;
	text-align: center; 

.nav {
  background-color: black;

.nav ul li {
  display: inline-block;

Any help with cleaning up the code or correcting it so that it displays correctly would be greatly appreciated. Thanks!


If it was my project I would use px not percent ..
I would do something like this:

.main img {
  height: 150px;
  width: 300px;
  float: left;