samedi 18 avril 2015

How to center an 'inline' unordered list

(First timer // Front End Newbie here so do bear with me)


For an assignment, I've created an inline 'unordered list' with multiple list items (which are to be my social links). I've also removed the bullet point from each 'li' item.


However, I can't get the list to center align. It seems to be pushed to the right by a handful of pixels..


http://ift.tt/1CYfy8m


What am I doing wrong?


HTML:



<!-- Head Tag -->
<head>
<meta charset="utf-8" />

<!--Font Awesome - for Social Media Icons -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<!--Google Font -->
<link href='http://ift.tt/1Q1825z' rel='stylesheet' type='text/css' />



<title>Rayan Jawad</title>
</head>

<!-- Body Tag - Content Starts Here -->
<body>

<!-- Top Part of the Page -->
<header class="headerstyle1">
<nav>
<a href="#" title="Contact Me" ="#" class="button2">Contact</a>
<a href="#" title="Résumé" class="button1">Résumé</a>
<a href="#" title="About Me" class="button1">About Me</a>
</nav>
<div class="ninesixty">
<h1>Rayan Jawad</h1>
<h2>Data Marketer // Growth Hacker</h2>

<ul class="sociallist">
<li><a href="#" title = "Facebook"> FB</a></li>
<li><a href="#" title = "Twitter"> TW</a></li>
<li><a href="#" title = "Google Plus"> GP </a></li>
<li><a href="#" title = "Linkedin">LI</a></li>
<li><a href="#" title = "Skype"> SK</a></li>
<li><a href="#" title = "Instagram"> IG</a></li>
<li><a href="mailto:#" title = "Email Me">EM </a></li>
</ul>
</div>

</header>
</body>

Aucun commentaire:

Enregistrer un commentaire