Images/Nav Shift when Browser Resizes

[verlaine]

Hello!

I am very much a beginner with coding, so I am unsure of which CSS elements to change to keep my navigation and images in place. Any help is very much appreciated! Here's the gist:

To display a list of thumbnails, I created a grid of images. When I resize my browser window, these images shift with it. What position or float tags should I alter, or what other coding should I use, so that these images are static and stay put when the window is resized?

The issue arises again with my navigation bar. The links span the window, but upon resizing, they shift.

Here is a link to my website. (It's still in development, so any links take you to the under construction page). I've been using Firefox exclusively, so I apologize for any errors other browsers may receive.


Here is the code for the grid of images:

Code: [Select]

.boxgrid{
width: 250px;
height: 250px;
margin:10px;
float:left;
background:#FFFFFF;
border: solid 2px #ECD842;
overflow:hidden;
position: relative;
}


Here is the code for the navigation:

Code: [Select]

/* MENU */

#menu {
position: static;
width : 100%;
background-color: #EDD043;
}

#menu .container {
margin: 10px 5px 5px 270px;
padding: 20px 0px 10px 0px; }

#menu ul {
float: left;
width: 160px;  /* the width of each column in the menu */
list-style-type: none;
overflow: auto
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#menu ul li.section-title { /* property of the section titles */
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
width: auto;
font-size: 8pt;
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 2px 0px;
}


#menu ul li {  /* property of the projects/exhibitions titles */
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
font-size: 25pt;
width: auto;
margin: 0px 0px 2px 0px;
}

#menu ul li.active { 
text-decoration: underline;
}

#menu p {
color: black;
width: auto;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
padding: 0px 0px 0px 0px;
                   margin: 0px 0px 0px 0px;
}

#menu ul a:link {
text-decoration: none;
color: white;
}

#menu ul a:active {
text-decoration: none;
color: white;
}

#menu ul a:visited {
text-decoration: none;
color: white;
}

#menu ul a:hover {
color: white;
}