Aligning images the correct way. I'm doing something wrong

[asasass]

I shouldn’t be using negative margins.

I’m going to keep working on this…

Edit fiddle - JSFiddle - Code Playground

.wrapg .b {
  display: block;
  margin: -202px -50px 4px 201px;
}

.wrapg .c {
  display: block;
  margin: -202px 0 4px 402px;
}

[asasass]

I tried this, this doesn’t look right.

Edit fiddle - JSFiddle - Code Playground

.wrapg .a {
  display: inline-block;
  margin: 0 0 4px 0;
}

.wrapg .b {
  display: inline-block;
  margin:  0 0 4px -1px;
}

.wrapg .c {
  display: inline-block;
  margin: -150px 0 4px 402px;
}

[asasass]

Using float works, would this be right? @PaulOB

Edit fiddle - JSFiddle - Code Playground

.wrapg .b {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 3px 12px 0;
}

.wrapg .c {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 3px 5px 0;
}

  <img src="https://via.placeholder.com/198x198" alt="" >

  <img src="https://via.placeholder.com/198x198" alt="" class="b">

  <img src="https://via.placeholder.com/198x198" alt="" class="c">

[asasass]

or like this:

Edit fiddle - JSFiddle - Code Playground

.wrapg .b, .c {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 3px 0 0;
}

or like this:

Edit fiddle - JSFiddle - Code Playground

.wrapg .b {
  float: middle;
  width: 198px;
  height: 198px;
  margin: 0 -1px;
}

.wrapg .c {
  float: right;
  width: 198px;
  height: 198px;
  margin: auto;
}

[tensormonkey]

You’re code is all over the place so I’m just going to restart from scratch (you can fill in the missing parts later):

First, you want to group all like elements together in a div. This makes styling infinitely easier. As a rule of thumb, if you’re positioning lots of elements by manipulating their positions to down to the pixel then you’re likely doing it wrong.

Basically what you’re doing is this:

<div class="wrapg">
  <img>
  <img>
  <img>

  <div class="video">...</div>
  <div id="thevideo">...</div>

  <div class="video">...</div>
  <div id="thevideob">...</div>

  <div class="video">...</div>
  <div id="thevideoc">...</div>
</dvi>

So let’s clean it up so that everything’s grouped together. We’ll also remove the ID’s and rename the classes to make more sense.

We’ll rename the videos so that .video becomes .play-button, and #thevideo|b|c each become .video.

<div class="wrap">
  <div class="video-block">
    <img class="video-cover" src="https://via.placeholder.com/198x198">
    <div class="video">...</div>
    <div class="play-button">...</div>
  </div>

  <div class="video-block">
    <img class="video-cover" src="https://via.placeholder.com/198x198">
    <div class="video">...</div>
    <div class="play-button">...</div>
  </div>

  <div class="video-block">
    <img class="video-cover" src="https://via.placeholder.com/198x198">
    <div class="video">...</div>
    <div class="play-button">...</div>
  </div>
</div>

Because the .video, .play-button, and .video-cover are each inside a .video-block, and since all .video-blocks are effectively the same, we can simplify the styles to just:

.video-block {
  position: relative; /* if you don't use this, then absolutely-positioned children elements will be positioned absolutely relative to the document, not this element! */
  float: left;
  border: 4px solid #00f;
  border-right: 0; /* If we don't do this, then you'll get double-borders around the center block. Delete it to see what I mean. */
}

/* We removed all right borders, so add it back in only for the last block */
.video-block:last-child {border-right: 4px solid #00f;}

.video, .play-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

/* Finally, let's clear the floats so that content underneath the wrap is pushed down. Try adding content after the block and deleting this so you can see what I mean */
.wrap:after {
  content: '';
  clear: both;
}

Here’s an example fiddle to get you started, there’s still some minor things you can fix but if you need help just ask, this was a lot to write : https://jsfiddle.net/cvLyj0xo/1/