Неправильно кодированы изображения

Question

Изображения вставлены неправильно. На нижнем слайде 3 картинки должны быть в ряд.

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


/*Intro*/

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #333;
  no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

.intro_inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.intro_title {
  color: #fff;
  font-size: 150px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}

.intro_title:after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 60px auto;
  background-color: #fff;
}

.intro_subtitle {
  margin-bottom: 15px;
  font-family: 'Kaushan Script', cursive;
  font-size: 52px;
  color: #fff;
  text-align: center;
}


/*Header*/

.header {
  width: 100%;
  position-top: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_logo {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}


/*Navigation*/

.nav {
  font-size: 14px;
  text-transform: uppercase;
}

.nav_link {
  display: inline-block;
  vertical-align: top;
  margin: 0 10px;
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: color .2s linear;
}


/*Полоска под словом : nav_link:after*/

.nav_link:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  display: none;
  background-color: #fce38a;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  transition: opacity .1s linear;
}

.nav_link:hover {
  color: #fce38a;
}

.nav_link:hover:after,
.nav_link.active:after {
  display: block;
  opacity: 1;
}

.nav_link.active {
  color: #fce38a;
}


/*Button*/

.btn {
  display: inline-block;
  vertical-align: top;
  padding: 10px 15px;
  border: 3px solid #fff;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .1s linear, color .1s linear;
}

.btn:hover {
  background-color: #fff;
  color: #333;
}

.slider {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.slider_inner {
  display: flex;
  justify-content: space-between;
}

.slider_item {
  width: 24%;
  padding: 20px 0;
  position: relative;
  border-top: 3px solid #fff;
  opacity: .7;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
}

.slider_item.active {
  opacity: .1;
}

.slider_item.active:before {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background-color: #f38181;
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
}

.slider_num {
  font-size: 24px;
  font-weight: 700;
}


/*Section*/

.section {
  padding: 80px 0;
}

.section_header {
  width: 100%;
  max-width: 950px;
  margin: 0 auto 40px;
  text-align: center;
}

.section_suptitle {
  font-family: 'Kaushan Script', cursive;
  font-size: 24px;
  color: #333;
}

.section_title {
  font-size: 30px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
}

.section_title:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 30px auto 30px;
  background-color: #f38181;
}

.section-text {
  font-size: 15px;
  color: #999;
}


/*about*/

.about {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}

.about_item {
  width: 380px;
  position: relative;
  background-color: #95e1d3;
}

.about_item:hover .about_img {
  transform: translate3d(-10px, -10px, 0);
}

.about_item:hover .about_text {
  opacity: .1;
}

.about_img {
  background: linear-gradient(to bottom, #f38181, #fce38a);
  transition: transform .1s linear;
}

.about_img img {
  display: block;
  transition: opacity .1s linear;
}

.about_text {
  width: 100%;
  font-size: 18px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  transform: translate3d(0, -50%, 0);
  transition: opacity .2s linear;
}


}

<header class="header">
  <div class="container">
    <div class="header_inner">
      <div class="header_logo">MoGo</div>

      <nav class="nav">
        <a class="nav_link active" href="#">About</a>
        <a class="nav_link" href="#">Service</a>
        <a class="nav_link" href="#">Blog</a>
        <a class="nav_link" href="#">Work</a>
        <a class="nav_link" href="#">Contact</a>
      </nav>
    </div>
  </div>
</header>


<div class="intro">
  <div class="container">
    <div class="slider_inner">
      <div class="intro_inner">
        <h2 class="intro_subtitle">Creative Template</h2>
        <h1 class="intro_title">Welcome to MoGo</h1>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="slider">
      <div class="container">
        <div class="slider_inner">
          <div class="slider_item active">
            <span class="slider_num">01</span> Intro
          </div>
          <div class="slider_item">
            <span class="slider_num">02</span> Work
          </div>
          <div class="slider_item">
            <span class="slider_num">03</span> About
          </div>
          <div class="slider_item">
            <span class="slider_num">04</span> Contacts
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<section class="section">
  <div class="container">

    <div class="section_header">
      <h3 class="section_suptitle">What we do</h3>
      <h2 class="section_title">Story about us</h2>
      <div class="section_text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>


    <div class="about">
      <div class="about_item">
        <div class="about_img">
          <img src="images/about/1.jpg" alt="">
        </div>
        <div class="about_text">super team</div>
      </div>

      <div class="about_item">
        <div class="about_img">
          <img src="images/about/2.jpg" alt="">
        </div>
        <div class="about_text">super team</div>
      </div>

      <div class="about_item">
        <div class="about_img">
          <img src="images/about/3.jpg" alt="
                </div>
                <div class="about_text">super team</div>
          </div>
        </div>

      </div>
    </section>

Answer 1

Для установки элементов в ряд, можно добавить стиль

.about .about_item{
  height: 100px;
  width: 100px;
  float: left;
}

Здесь что бы все работало корректно, обязательно должна быть ширина у объкта.

БЛОГ НА HUSL

Неправильно кодированы изображения

Ответы (1 шт):