title: How to align button in top right corner inside Dialog angular material?
body: <p>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. <a href="https://i.stack.imgur.com/LnHhH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LnHhH.png" alt="enter image description here" /></a></p>
  <p>This is my html code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;button #btnClose mat-button class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
      &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  <p>and this is my css code:</p>
  <pre class="lang-css prettyprint-override"><code>.close {
    color: black;
    opacity: 1;
    max-width: 2vw !important;
    min-width: 2vw !important;
  }
  </code></pre>
  <p>I can do some &quot;trick&quot; in css with margin, but I think that is bad idea:</p>
  <pre class="lang-css prettyprint-override"><code>.close {
    color: black;
    opacity: 1;
    max-width: 2vw !important;
    min-width: 2vw !important;
    margin: -1.2vw -1.2vw;
  }
  </code></pre>
  <p>and than I get what I want:</p>
  <p><a href="https://i.stack.imgur.com/Ni9Ah.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ni9Ah.png" alt="enter image description here" /></a></p>
  <p>Any better solution?
  P.S: It has to be responsive.</p>