title: I can't connect href link to email and can't adjust the the elements due to themselves
body: <p>I totally googled the email part and don't know it normally works like that or Nah</p>
  <p>I tried with flex but still couldn't fix it out. I can fix with margin and padding, but that's like cheating.</p>
  <p><a href="https://i.stack.imgur.com/sMm2M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sMm2M.png" alt="enter image description here" /></a></p>
  <p>As you can see from screenshot, Email button and text is not in line, and it's not in line with a button. Other than that, I couldn't connect a link to the button. It's just like a link on top of the button</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    box-sizing: border-box;
    text-align: center;
    background: #23252C;
  }
  
  .desc {
    color: #DCDCDC;
  }
  
  #title {
    color: #F3BF99;
  }
  
  #name {
    color: #FFFFFF;
  }
  
  .header {
    color: #F5F5F5;
  }
  
  #content {
    position: absolute;
    width: 22em;
    height: 27em;
    top: 2.6em;
    /* margin-left: 5em; */
    align-content: center;
    border-radius: 1em;
    left: 100px;
    background: #1A1B21;
    margin-left: 25em;
    /* margin: 0 auto; */
  }
  
  .icon {
    padding: 1em;
  }
  
  header {
    font-size: larger;
    color: antiquewhite;
  }
  
  #email-contact {
    text-decoration: none;
  }
  
  .email-button {
    padding: 0.2em;
  }
  
  button {
    width: 25%;
    height: 6%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='content'&gt;
    &lt;h1 id='name'&gt;Yusif Ahmedov&lt;/h1&gt;
    &lt;button id="email"&gt;
            &lt;img className='email-button' src={logo3} alt='email-icon'/&gt;
            &lt;a className='email-button' id='email-contact' href = "mailto:ahmedovyusif8785@gmail.com?subject = subject text"&gt;Email&lt;/a&gt;
          &lt;/button&gt;
    &lt;button id="linkedin"&gt;&lt;/button&gt;
    &lt;h2 id='title'&gt;Front-End Developer&lt;/h2&gt;
    &lt;header className='header' id="about-header"&gt;About&lt;/header&gt;
    &lt;p className='desc' id="about"&gt;I am a front-end developer who is passionate about coding and engaging both creative and practical side of the human potential.&lt;/p&gt;
    &lt;header className='header' id="interests-header"&gt;Interests&lt;/header&gt;
    &lt;p className='desc' id="interests"&gt;Productivity articles, Time Management, Coffee, Music, Sports, Social Activities.&lt;/p&gt;
    &lt;footer&gt;
      &lt;a className='icon' href='https://github.com/PufflyMan'&gt;
        &lt;img src={logo1} alt='github-icon' /&gt;
      &lt;/a&gt;
      &lt;a className='icon' href='https://www.linkedin.com/in/yusif-ahmedov-7453ba21b/'&gt;
        &lt;img src={logo2} alt='linkedin-icon' /&gt;
      &lt;/a&gt;
    &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>