title: How do I organize my css better so that separate a tags don't get the same styling?
body: <p>This is how my index.php should <a href="https://codepen.io/SuperN00b/pen/rjKOaP" rel="nofollow noreferrer">look</a> (codepen link)</p>
  
  <p>I'm trying to add javascript functions to the buttons on the right. However, there is a styling issue that messes the buttons up. This is what <a href="https://codepen.io/SuperN00b/pen/zNavYX" rel="nofollow noreferrer">happened</a>.</p>
  
  <p>As you can see the log in button has taken the styling of the a tags for the footer.</p>
  
  <p>I don't know much about javascript and got the code from a tutorial I found. I would rather not change the javascript. I'm sure that I probably need to organize my html or css better. If anyone has any tips, I would really appreciate it. I've been stuck on this for two days. </p>
  
  <p>The only way I was able to move the button was styling it in html button </p>
  
  <p>ex: </p>
  
  <p><code>&lt;a id="loginbutton" href="javascript:toggle();" style="top: 220px;"&gt;log in&lt;/a&gt;</code> 
  I don't like this solution because I'm going to want to make the webpage responsive. I need to be able to make media queries in the stylesheet. </p>
  
  <p>SUMMARY: </p>
  
  <ol>
  <li>When I added the javacript, the styling for the footer tag links (a tag) messes up my button styling. </li>
  <li>This needs to be styled in the css file, not the html. </li>
  </ol>