Q:

separating hyperlinks in webpage footer

I am making a website and I added a footer that has a link to my GitHub profile and the website repo.  I've got the footer looking how I want it to except the links are right next to each other with barley any space between them.  I've tried to add a paragraph with just spaces in between the links but then it made the footer just have three separate lines.  How can I add some space between the links and keep them on the same line. 
Here is the CSS and HTML for my footer:

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}
<div class="footer">
 <a href="[github profile url]">GitHub Profile</a>
 <a href="[website repo link]">Website Repo</a>
</div>

A:

I usually separate elements like that by making a class to pad the items in question.  Adding padding to elements can space them out.  You can change the element's placement in its parent element with various "display" settings, or use margin or even border to put space between things, or even use columns in the space provided, but padding seems to be the most appropriate use. 

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: DarkGray;
  text-align: center;
  line-height: 50px;
}

.footer-links {
 padding: 0 10px 0 10px; /* padding-top, padding-right, padding-bottom, padding-left */
}
<div class="footer">
 <a class="footer-links" href="[github profile url]">GitHub Profile</a> /* add this class to each of your footer items */
 <a class="footer-links" href="[website repo link]">Website Repo</a>
</div>

