How can I make images the same size and in a row?-CodePudding

I'm taking an exam on these topics, almost all of it (except the photo tab), we did together with the teacher today, and he said to drop it off within a few days with this tab, but done in full. Everything on this tab now I have done myself, on the principle of the whole code. This is one of the last exams I need to take, so I'm asking for some real help. Thank you!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

header {
  width: 100%;
  height: 100vh;
  background: url(https://images.unsplash.com/photo-1560703650-ef3e0f254ae0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80) no-repeat;
  background-size: cover;
  text-align: center;
}

nav {
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
}

nav a {
  text-decoration: none;
  margin: 20px;
  color: #0288E3;
  text-transform: uppercase;
  font-weight: 700:;
}

nav a:hover {
  color: white;
  transition: 0.5s;
}

h1 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 6em;
  padding-top: 17%;
}

header {
  color: rgba(255, 255, 255, 0.9);
}

#about {
  width: 100%;
  padding: 100px;
  background: #D3E7F5;
}

h2 {
  text-align: center;
  font-size: 2em;
  color: #0288E3;
  text-transform: uppercase;
}

#about p {
  width: 500px;
  margin: 2% auto;
  text-align: justify;
  color: #1E0976;
}

#blog {
  width: 100%;
  padding: 100px;
  background: #fff;
}

#blog main {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

#blog main .box {
  flex-basis: 20%;
  background: white;
  margin-top: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

#blog main .box img {
  width: 100%;
}

#blog main .box h3 {
  text-align: center;
  padding: 10px;
  text-transform: uppercase;
  color: #0288E3;
}

#blog main .box p {
  padding: 10px 10px 20px 10px;
  text-align: center;
  color: #4e4e4e;
}

footer {
  width: 100%;
  padding: 40px;
  background: #0288E3;
  text-align: center;
  color: white;
}

footer a {
  color: white;
  text-decoration: none;
  margin: 5px;
}

#photo {
  width: 100%;
  padding: 40px;
  background: #D3E7F5;
}

#photo main {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

#photo main .box2 {
  flex-basis: 20%;
  background: white;
  margin-top: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

photo main .box2 img {
  width: 100%;
}

#photo h2 {
  text-align: center;
  padding: 10px;
  text-transform: uppercase;
  color: #0288E3;
}

#photo p {
  width: 230px;
  margin: 0.3% auto;
  text-align: justify;
  color: #1E0976;
}

<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
  </style>
</head>

<body>
  <header id="top">
    <nav>
      <a href="">home</a>
      <a href="#about">about</a>
      <a href="#blog">blog</a>
      <a href="#photo">photo</a>
      <a href="#contacts">contacts</a>
    </nav>

    <h1> Greece </h1>

    <p>
      All there is to know about Greece and the Greek islands
    </p>
  </header>

  <section id="about">
    <h2> about </h2>

    <p>
      суверенна європейська держава на півдні Балканського півострова та численних островах грецького архіпелагу. Населення: 10,7 млн осіб (73 місце у світі). Столиця і найбільше місто — Афіни.
    </p>

    <p>
      Знаходячись на південній околиці Балканського півострова, Греція розташована на перехресті Європи, Азії та Африки. На півночі межує з Албанією, Північною Македонією та Болгарією, на сході — з Туреччиною.
    </p>

  </section>

  <section id="blog">
    <h2> blog </h2>

    <main>
      <div >
        <img src="https://images.unsplash.com/photo-1601581875309-fafbf2d3ed3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
        <h3>home</h3>
        
        <p>
          Сучасна Греція — спадкоємиця культури Стародавньої Греції і вважається колискою західної цивілізації
        </p>
      </div>
      
      <div >
        <img src="https://images.unsplash.com/photo-1601581875309-fafbf2d3ed3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
        <h3>about</h3>
        
        <p>
          Сучасна Греція — спадкоємиця культури Стародавньої Греції і вважається колискою західної цивілізації
        </p>
      </div>
      <div >
        <img src="https://images.unsplash.com/photo-1601581875309-fafbf2d3ed3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
        <h3>blog</h3>
        
        <p>
          Сучасна Греція — спадкоємиця культури Стародавньої Греції і вважається колискою західної цивілізації
        </p>
      </div>
      
      <div >
        <img src="https://images.unsplash.com/photo-1601581875309-fafbf2d3ed3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
        <h3>photo</h3>
        <p>
          Сучасна Греція — спадкоємиця культури Стародавньої Греції і вважається колискою західної цивілізації
        </p>
      </div>
    </main>
  </section>
  
  <section id="photo">
    <h2>photo</h2>
    <p>
      Найкращі фотографії Греції
    </p>
  </section>
  <main>
    <div >
      <img src="https://images.unsplash.com/photo-1533104816931-20fa691ff6ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
    </div>
    <div >
      <img src="https://images.unsplash.com/photo-1534695215921-52f8a19e7909?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=385&q=80">
    </div>
    <div >
      <img src="https://images.unsplash.com/photo-1504512485720-7d83a16ee930?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=904&q=80">
    </div>
    <div >
      <img src="https://images.unsplash.com/photo-1503152394-c571994fd383?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
    </div>
    <div >
      <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80">
    </div>
  </main>
  <footer id="contacts">
    <a>
        e-mail: [email protected] &nbsp; &nbsp; |
        &nbsp; phone number: 067 111 1111 &nbsp; &nbsp; |
        </a>

    <a href="#top">
            top
        </a>
  </footer>
</body>

CodePudding user response：

Add this to your css file:

.box2{
    display: inline;
}
.box2 img{
    width: 200px;
}

CodePudding user response：

Just add to img tag width:100%;