Thiết kế website giá rẻ

Question

I’ve been trying to complete this challenge project for Web Dev on Codecademy and I’m stuck on trying to center images in a grid. I’ve tried to use justify-content and justify-items in just about every selector within the grid and the grid container itself and cannot figure out what is wrong.

/* Fonts */

.cinzel-decorative-regular {
  font-family: "Cinzel Decorative", serif;
  font-weight: 400;
  font-style: normal;
}

.cinzel-decorative-bold {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-style: normal;
}

.cinzel-decorative-black {
  font-family: "Cinzel Decorative", serif;
  font-weight: 900;
  font-style: normal;
}

.ruthie-regular {
  font-family: "Ruthie", cursive;
  font-weight: 400;
  font-style: normal;
}

.eb-garamond {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* Colors */

.drab-dark-brown {
  color: #313715;
}

.ecru {
  color: #c4a77d;
}

.hookers-green {
  color: #70877f;
}

.black-bean {
  color: #280004;
}

.navy-green {
  color: #393a10
}


/* Styling */

html {
  font-size: 16px;
  background-color: #313715;
}

.header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: #70877f;
}

a:hover {
  color: #A6B5B0;
  cursor: pointer;
}

a:active {
  color: #54645e;
}


/* .navbar {

} */

.navbar ul {
  text-align: center;
  list-style: none;
  padding-right: 0.5rem;
}

li {
  display: inline-flex;
  font-family: 'Cinzel Decorative';
  font-weight: 600;
  font-size: 1.75rem;
  padding-left: 1rem;
}

h1 {
  font-family: 'Ruthie';
  font-size: 4rem;
  text-align: center;
  color: #70877f;
  text-shadow: 3px 3px 8px #2e3834;
}

.mission-container {
  display: flex;
  background-image: url('resources/images/apothecary-shelves.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 25rem;
  align-items: center;
  justify-content: center;
}

.mission-statement {
  background-color: #313715;
  width: 100%;
  text-align: center;
  opacity: .85;
}

.mission-statement h2 {
  font-size: 2.25rem;
  color: #c4a77d;
  margin-bottom: .2rem;
}

.mission-statement p {
  font-size: 1.25rem;
  margin-top: 0;
  color: #c4a77d;
}

h2 {
  font-family: 'Cinzel Decorative';
  color: #c4a77d;
  font-size: 1.85rem;
}

h3 {
  font-family: 'EB Garamond';
  color: #c4a77d;
  font-size: 1.25rem;
  text-align: center;
}

p {
  font-family: 'EB Garamond';
}


/* Services */

.services-title {
  text-align: center;
  margin-bottom: 0;
}

.services {
  display: flex;
}

.image-container {
  display: grid;
  grid-template-areas: 'img-1 img-2' 'img-3 img-4';
  padding: .5rem;
  justify-items: center;
}

.image-container h3 {
  background-color: #c4a77d;
  color: #313715;
  /* padding: 2rem 0; */
  font-size: 1.45rem;
}

.img-1,
.img-2,
.img-3,
.img-4 {
  margin: 1%;
  background-color: #c4a77d;
  opacity: .75;
  align-content: center;
}

.services img {
  border: 2px solid #313715;
  border-radius: 5px;
  width: 90%;
  justify-items: center;
}

.services h2 {
  text-align: center;
}


/* Team Headshots */

.team {
  display: flex;
  justify-content: center;
  padding-left: 5%;
}

.team-title {
  text-align: center;
}

.team h2 {
  width: 100%;
  text-align: center;
}

.team img {
  height: auto;
  margin-left: 1px;
  margin-right: 1px;
  width: 80%;
  border: 2px solid #c4a77d;
}

<head>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Ruthie&display=swap" rel="stylesheet">

  <title>Practical Magic Apothecary</title>
</head>

<body>
  <div class="header">
    <h1>Practical Magic Apothecary</h1>
    <div class="navbar">
      <nav>
        <ul>
          <li><a href="#mission">Mission</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#team">Team</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="mission-container" id="mission">
    <div class="mission-statement">
      <h2>Practical Magic Apothecary</h2>
      <p>We specialize in procuring and providing all your herbal and metaphysical needs.</p>
    </div>
  </div>
  <h2 class="services-title">Our Services</h2>
  <div class="services" id="services">
    <div class="image-container">
      <div class="img-1">
        <h3>Herbal Mixes</h3>
        <img src="resources/images/potion-pouring.jpg" alt="a person pouring liquid into a mortar">
      </div>
      <div class="img-2">
        <h3>Spelled Candles</h3>
        <img src="resources/images/candle.jpg" alt="several candles with one lit">
      </div>
      <div class="img-3">
        <h3>Herbal Tinctures</h3>
        <img src="resources/images/tincture.jpg" alt="pouring a tincture onto hand">
      </div>
      <div class="img-4">
        <h3>Organic Herbs</h3>
        <img src="resources/images/ingredients.jpg" alt="different herbal ingredients">
      </div>
    </div>
  </div>
  <div class="team-title">
    <h2>Meet the Coven</h2>
  </div>
  <div class="team" id="team">
    <div class="headshot-1">
      <img src="resources/images/headshot1.jpg" alt="headshot of owner">
      <h3>Owner</h3>
    </div>
    <div class="headshot-2">
      <img src="resources/images/headshot2.jpg" alt="headshot of manager">
      <h3>Manager</h3>
    </div>
    <div class="headshot-3">
      <img src="resources/images/headshot3.jpg" alt="headshot of herbalist">
      <h3>Herbalist</h3>
    </div>
  </div>
</body>

Thiết kế website giá rẻ

Danh mục

cannot center images in grid in css