Different HTML layout in Chrome than Safari

I'm trying to build a website to showcase photography, and the images are arranged in a grid. The grid looks perfect on Safari, but on Chrome and even Firefox the grid is all messed up. Also, my "logo" image, that had an id of logo, doesn't display on these two browsers, even after copying it's path.

I also have a modal with an id of bg that is hidden by default (JQuery .hide()).

HTML:

<div id="container_nav">

    <div id="nav">

        <!-- <a href="dirtygrid_html.html"> --><img id="logo" src="file:///Users/Pablo/Desktop/DirtyGrid/logo.jpg"><!-- </a> -->
        <span id="contact">CONNECT</span>

    </div>

</div>

<div id="container_canvas">

    <div id="canvas">

        <img id="imgbig" alt="New York by air" src="pictures/IMG_1148 copy.jpg">

        <img id="imgR1" src="pictures/IMG_4970 copy.jpg">
        <img id="imgR2" src="pictures/IMG_5331.jpg">            
        <img id="imgR3" src="pictures/IMG_0255 copy.jpg">

        <img id="imgR1" src="pictures/IMG_0381 copy.jpg">
        <img id="imgR2" src="pictures/IMG_4897 copy.jpg"> 
        <img id="imgR3" src="pictures/IMG_0011 copy.jpg">


        <img id="imglong" src="pictures/IMG_0134-Edit-2 copy.jpg">


        <img id="imgL1" src="pictures/IMG_5507 copy.jpg">           
        <img id="imgL2" src="pictures/IMG_4823 copy.jpg">
        <img id="imgL3" src="pictures/IMG_5096 copy.jpg">

        <img id="imgbig2" src="pictures/IMG_1245 copy.jpg">

        <img id="imgL1" src="pictures/IMG_4862 copy.jpg">
        <img id="imgL2" src="pictures/IMG_1226 copy.jpg">
        <img id="imgL3" src="pictures/IMG_1749 copy.jpg">

    </div>

</div>

<div id="bg">

    <div id="modal">

        <span id="title"><h2>Send me a message!</h2></span></br>
        <span id="name">Name</span></br>
        <input id="fname" type="text" placeholder="First Name">
        <input id="lname" type="text" placeholder="Last Name"></br></br></br>

        <span id="countryTitle">Where are you from?</span></br>
        <input id="country" type="text" placeholder="China, France, Canda, Hong Kong..."></input>

        <span id="messageTitle">Message</span>
        <textarea id="message" placeholder="ex. You're so handome...">      </textarea>

        <button id="submit">Submit</button>

    </div>
</div>

CSS:

#container_nav{
width: 40%;
height: 100px;
margin: 15px auto 15px auto;
z-index: 1;
position: absolute;
left: 0;
right: 0;
}

#nav{
height: 100%;
width: 100%;
}

#logo{
margin-left: 30px;
height: 65px;
cursor: pointer;
float: left;
margin-top: 17.5px;
z-index: 0;
position: relative;
}

#contact{
float: right;
font-size: 20px;
line-height: 100px;
margin-right: 30px;
cursor: pointer;
font-family: 'Raleway', sans-serif;
font-weight: 100;
}

#container_canvas{
width: 40%;
height: 100%;
top: 0px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
}

#canvas{
width: 100%;
height: 100%;
margin-top: 130px;
}

img{
z-index: 0;
}


#imgR1, #imgR2, #imgR3{
width: 19.6%;
padding: 0px;
float: left;
margin-bottom: 0.7%;
}

#imgbig{
width: 39.7%;
margin-right: 0.5%;
margin-bottom: 0.7%;
padding: 0px;
float: left;
}

#imgbig2{
width: 39.7%;
margin-right: 0%;
margin-bottom: 0.7%;
padding: 0px;
float: right;
}

#imgR1, #imgR2{
margin-right: 0.5%;
}

#imgR3{
margin-right: 0%;
}

#imgL1, #imgL2, #imgL3, #imgL4{
margin-right: 0.5%;
width: 19.6%;
float: left;
margin-bottom: 0.7%;
}

#imgL5{
margin-right: 0%;
margin-bottom: 0.7%;
float: left;
width: 19.6%;
}

#imglong{
width: 100%;
margin-right: 0%;
padding: 0px;
height: auto;
float: left;
margin-bottom: 0.7%;
}

#bg{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
z-index: 100;
float: center;
}

#modal{
height: 680px;
width: 800px;
background-color: white;
border-radius: 5px;
margin-top: -390px;
margin-right: auto;
margin-left: auto;
top: 50%;
position: absolute;
left: 0;
right: 0;
padding: 50px 100px 50px 100px;
z-index: 1;
}

Any help is appreciated, it's been driving me nuts!