Locating Images With CSS

[Aouellets]

I am working on building out some UI elements for an experience. 

Simply, there are buttons at each edge that when clicked with animate in and out a styled panel/grid. 

For whatever reason, studio seems to have an invisible div that I cannot edge or remove that is making the top and bottom images sit far from the edge. 

See the attached screenshot and classes.

.OpenImageTop {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(270deg);
}

.CloseImageTop {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(90deg);
}

.OpenImageBottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(90deg);
}

.CloseImageBottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(270deg);
}

[dsgnrClarK]

maybe  this would help

.position{
  transform-origin: 10px 10px; //value depends
}

by the way, I commented out transform: translate(-50%, -50%);