While working on my site with a grid of images, I noticed that the h1 element centers itself when I go into full screen mode, but the grid of images does not. It seems like the grid is not responsive. How can I ensure that the grid of photos stays centered when going into full screen mode? Any help is appreciated.
Here is the code I am currently using
<!DOCTYPE HTML>
<html>
<head>
<title>*****club</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="banner" align="center" height="50">
<h1>*****CLUB<span>.urmom</span></h1>
</div>
<div id="nav" align="left" width="100">
<p><a href="About">About</a></p>
<p><a href="Contact">Contact</a></p>
<p><a href="Next Party">Next Party</a></p>
</div>
<ul id="pics" align="center" width="750" class="opacity" cellspacing="0">
<li><a href="1"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="1"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="1"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
</ul>
</table>
</body>
</html>
/***********
Banner
**********/
@font-face {
font-family: blackout;
src: url('BlackoutMidnight.ttf')
}
h1 {
color: white;
font-family: blackout;
font-size: 7em;
position: relative;
top: -40px;
letter-spacing: 0.06em;
}
h1:hover {
color: yellow;
}
h1 span {
font-size: 0.2em;
}
/**********
Grid Template
***********/
ul {
width: 750px;
position: relative;
left: 200px;
list-style: none;
}
/**********
Pics Position
***********/
li {
float: left;
padding: 0px;
margin: 0px;
display: block;
}
img {
display: block;
float: left;
}
/*********
Hover Effects
*********/
img.opacity {
opacity: 0.65;
filter: alpha(opacity=65);
}
img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
}
/********
Sidebar style
********/
a {
text-decoration: none;
color: white;
font-family: blackout;
font-size: 1.3em;
}
p {
position: absolute;
left: 30px;
top: 245px;
letter-spacing: 0.1em;
}
p:nth-child(2) {
position: absolute;
left: 30px;
top: 360px;
}
p:nth-child(3) {
position: absolute;
let:30px;
top: 465px;
}
p a:hover {
color: yellow;
font-size: 2em;
}