main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  background-color:  #ecdab4;

}
body{
  padding: 50px;
  background-image:url(backgrounds/beige237.gif);
}

h1 {
  margin: 0;
  font-size: 36px;
  color: #333;
  text-align: center;
}

.nav-container {
  text-align: center;
}

nav {
  display: inline-block;
  margin-top: 25px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
}

nav a:hover {
  text-decoration: underline;
}

h6 {
  text-align: center;
}

p {
  margin: 20px;
}

li {
  list-style-type:none;
  margin-bottom:18px;
}


.gallery-2 { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  margin:auto;
  width:700px; /* this can be modified to make the gallery wider */
}

.gallery-2 img {
  padding-left:25px;
  padding-right:25px;
  width:300px;
  height:225px;
  object-fit:cover;
}

.gallery-3 { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  margin:auto;
  width:1100px; /* this can be modified to make the gallery wider */
}

.gallery-3 img {
  padding-left:25px;
  padding-right:25px;
  width:300px;
  height:225px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
}