How to align button in top right corner inside Dialog angular material?

Question

I want to align button in top right corner inside dialog angular material. The problem is that I have some space between button and corner of dialog, and I don't want it.

This is my html code:

 <button #btnClose mat-button class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">&times;</span>
 </button>

and this is my css code:

.close {
  color: black;
  opacity: 1;
  max-width: 2vw !important;
  min-width: 2vw !important;
}

I can do some "trick" in css with margin, but I think that is bad idea:

.close {
  color: black;
  opacity: 1;
  max-width: 2vw !important;
  min-width: 2vw !important;
  margin: -1.2vw -1.2vw;
}

and than I get what I want:

Any better solution? PS: It has to be responsive.

Answer 1

If you want to align something in the top right, you can use:

.close {
  position: absolute;
  top: 0;
  right: 0;
}