Pushing two floats together inside a div

HTML-CSS
1

Is this how it would be written, to push two floats together?

With padding it goes all the way up to 41px right next to each other.
https://jsfiddle.net/ocjs81Lf/5/

.container-top {
  position: relative;
  height: 310px;
  padding: 0 20px;
}

Margin breaks up after 20px.
This way wouldn’t work then.
https://jsfiddle.net/dmb19z2v/3/

.container-left-video,
.container-right-video {
  margin: 0 20px;
  background: blue;
}
2

I’m not really sure I would say there is a right or wrong way. Using padding you are pushing from the container in, with margin you are pushing from the element out. If you want to use margin and have it work like the padding you can just give each elements margin left/right as needed (.container-left-video > margin-left, .container-right-video > margin-right)

Considering you are already positioning them you can also just use left/right and set the elements to position absolute. The fact that it is completely non-responsive makes the way you position the elements less relevant.

.container-right-video, .container-left-video {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.container-left-video {
  left: 20px;
}

.container-right-video {
  right: 20px;
}