How to create a horizontal column in HTML and CSS?

Question

I am trying to replicate this site's column, its the horizontal column, right below the hero section (it has 4 images of a Apple watch, iPad pro, "Better together," and a Macbook). My problem is that I can't seem to have the images all at the equal length and width, in fact, the images just cluster together at the center and get cut off. I am an amateur at coding and new to stack overflow so if I'm not making anything clear, please tell me.

.sub-hero {
width: 610px;
margin: 0 auto;
}
.col-1 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("watch_large.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}
.col-2 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("ipad_pro_large.jpg");
  background-size: cover;
  background-position: center;
}
.col-3 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("accessories_large,jpg");
  background-size: cover;
  background-position: center;
}
.col-4 {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-image: url("macbook_large.jpg");
  background-size: cover;
  background-position: center;
}

<div class="sub-hero">
    <div class="col-1">
      <img src="images\watch_large.jpg">
    </div>
      <div class="col-2">
        <img src="images\ipad_pro_large.jpg">
      </div>
      <div class="col-3">
        <img src="images\accessories_large.jpg">
      </div>
      <div class="col-4">
        <img src="images\macbook_large.jpg">
      </div>
</div>

Answer 1

There are a few things to cover here:

• If you set the background-image property in CSS, you no longer need the <img> tag. Actually, this is the reason why your images are clustered together. You may remove all the <img> tags.
• In your CSS .col-3 the background-image property has a comma in the URL instead of a dot.
• The CSS .sub-hero needs to have font-size: 0; set in order to eliminate whitespace between inline-block elements (this is one way of handling this issue: Fighting the Space Between Inline Block Elements).

.sub-hero {
  width: 610px;
  margin: 0 auto;
  font-size: 0;
}
.col {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.col-1 {
  background-image: url("https://altcademy.github.io/apple_clone/images/watch_large.jpg");
}
.col-2 {
  background-image: url("https://altcademy.github.io/apple_clone/images/ipad_pro_large.jpg");
}
.col-3 {
  background-image: url("https://altcademy.github.io/apple_clone/images/accessories_large.jpg");
}
.col-4 {
  background-image: url("https://altcademy.github.io/apple_clone/images/macbook_large.jpg");
}

<div class="sub-hero">
  <div class="col col-1"></div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
  <div class="col col-4"></div>
</div>