Adding padding: 0 20px; doesn’t work with added borders

How would I get it to work with added borders?

Left side is 21px right side is 14px.

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 0 20px;
}

padding: 0 20px;
https://jsfiddle.net/udsav90r/2/

Full Code:

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 0 20px;
}

.video-wrapper {
  min-width: 40%;
  max-width: 789px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

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

.video {
  border-radius: 25px;
  border: 3px solid green;
}

Hello,

I see you using the clockwise notation but you have defined only the top(0) and right(21px). Based on what you said left side being 21px and right side 14px it should be:

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 0px 14px 0px 21px;
}

It’s my first week of CSS but it should work lol the link below from W3School is also very good resource. https://www.w3schools.com/css/css_padding.asp

whenever you give margin or padding property like this:
padding: 10px 20px; you browser take it as

padding-top: 10px; 
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

and for
padding: 10px 15px 20px 25px
it applied as

padding-top: 10px; 
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

It’s a clockwise pattern which starts from top and end at left.