Elements fall below the side nav menu rather than next to it

[Johned22]

I am having issues with my code since implementing the mobile drop down menu bar on the left hand side of the page. Sorry I have put so much code in the codepen I just dont know what is wrong so I cant eliminate much of it. As you can see when you when you shrink the page down to 600px it turns into the mobile version with a drop down menu tab for the different pages. The problem is when I do this the other elements for the page sits below the bottom of the drop down menu not at the top of the page ( scroll down bellow the yellow box and you will see the blue and black text below the yellow box which should be at the top of the page. The desktop version is fine the way it is but I dont know how to make all the elements sit at the top of the page for the mobile version. As you can see the text and images sits below the yellow box not at the top of the page. If I remove the yellow box it also uncovers the drop down menu for the mobile screen so I cannot remove that part. I have tried placing the info between the site-wrap in the HTML but that just makes all the text clickable and it also affects the desktop version which I dont want it to do. Where am I going wrong? I have attached the code below

http://codepen.io/Johned22/pen/RGppPm/

Thanks in advance

[ronpat]

Have you validated your HTML? You have some creative code there. There are some stray tags associated with the nav and lists and I’m not sure how they are supposed to be arranged. There is also some HTML in the CSS (attempt to call and svg). Please validate your HTML and CSS and make whatever corrections are needed to the CodePen, and let us know when you are finished.

[pr0c3ss]

Few noticeable problems to get you started

a href tags (4 instances of inside site-wrap) need closing like so

<a href="https://www.instagram.com/tunnelvisionfitness" target="_blank"> </a>

You have

<div id="nav"> so </div> should close this.

I’m not sure where this closes as three lines further down there’s nav (with no closing nav and nav class=“nav”… which is closed via nav!

next… ul class =“nav-list” this tag is not closed.

css
media queries need closing brackets before starting another media query. Theres no closure brackets after 700 and 600 queries

few minor things…
your images do not make use of alt
your overusing/incorrectly using classes and ids

good luck

[SamA74]

@ronpat

Have you validated your HTML?

Codepen now as built in linting, click the drop-down arrow on the HTML/CSS editor window and click Analyze HTML/CSS to highlight problems in your code.