localhost loads default apache page I'm setting up a localhost and everything looks like it should work but whenever I go to site.local it loads the default Apache localhost page (It works!).

Here's a copy of my hosts file:

##
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1    localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%1o0 localhost

#####
 DEV
#####
# SITE
127.0.0.1    site.local
::1          www.site.local


and my vhost:

&lt;VirtualHost *:8080&gt;
    ServerAdmin test@test.com
    ServerName site.local
    DocumentRoot "/Users/me/site"
    ErrorLog "/Applications/MAMP/logs/site.local-error_log"
    CustomLog "/Applications/MAMP/logs/site.local-access_log" common
    &lt;Directory "/Users/me/site"&gt;
        Options Indexes FollowSymLinks
        AllowOverride All
    &lt;/Directory&gt;
&lt;/VirtualHost&gt;


Things I've done to make sure it isn't a user error:


uncommented the line in the httpd.conf file to include my vhost file
used apachectl configtest to test my file (came back saying syntax OK)


Things to note:


I use port 8080 and 3307 for Apache and MYSQL
If I go to site.local:8080 it loads but doesn't render the elements as it should (instead loads the elements of the html in a list format)
this is off a FRESH install of MAMP
OS: OS X Yosemite version 10.10.5
MAMP Version: 3.5


I just don't see what's going wrong... any ideas?

UPDATE

localhost works as it should with port 80. 8080 = the default apache page, but 80 loads the site pages...
Based on your comment that when you go to site.local:8080 you get a white page with the words "It Works!" similar to the screen capture below



What you are seeing is the webpage based on the global server configuration where the DocumentRoot is whatever default MAMP is set for.

You mention in your OP that 


  If I go to site.local:8080 it loads but doesn't render the elements as it should (instead loads the elements of the html in a list format)


Apache isn't going to render your webpage as a HTML list (unless you tell it to).  More than likely what you are seeing is a directory listing similar to this:



You get that listing because of the line Options Indexes FollowSymLinks in your httpd.conf file.  If you want to disable this, remove the word Indexes from that line and the listing will no longer show up.

Your Virtual Host Configuration

First, we need to understand how Apache handles virtual host requests.  From the Apache documentation:


  When a request arrives, the server will find the best (most specific)
  matching  argument based on the IP address and port used
  by the request. If there is more than one virtual host containing this
  best-match address and port combination, Apache will further compare
  the ServerName and ServerAlias directives to the server name present
  in the request.
  
  If you omit the ServerName directive from any name-based virtual host,
  the server will default to a fully qualified domain name (FQDN)
  derived from the system hostname. This implicitly set server name can
  lead to counter-intuitive virtual host matching and is discouraged.


If you notice, your host that is defined the global server configuration is the same as the virtual host.   

This is probably where you are getting your error.

Now, my fix for this is a bit more involved initially, but infinitely more efficient because I try to avoid turing my machine into both a client and a server.  I do all my development on a Mac with a Virtual Machine running my AMP server.  This way I can mirror my production environment much closer and I don't have unnecessary services (like Apache and MySQL) running on OS X; they are all relegated to the VM.  The VM has it's own IP, own server name, everything so when I point my browser to it, I know what results to expect.

I have a write up on how to install a FreeBSD VM on VirtualBox running on a Mac that has autostart enabled.  If you are interested, I can share it with you.