I've just finished build your own website and CSS basics course, I'm trying to put what I've learnt into practise my building my own simple website for my design business. I've just run into a couple of problems...

1. On the contact details I'm trying to display the little logo next to the actual details, but they aren't appearing...have copied the same code used in the build your own website task so I'm not sure what I've missed out?

2. In between the main heading/navigation and the main part of the website I'd like to add some space, so it's not all jammed up the top. I've been experimenting with padding and margins but I can't find anything which works how a want it to. Am I not targeting the correct things?

Here is my CSS:

/****Base Styles****/

• { box-sizing:border-box; }

/****Element Borders****/

/*

• { border: 1px solid black; } */

/****Main Styles****/

body { color: #b2b2b2; margin:0; font: 1em/1.5 'Poiret One', Helvetica, Ariel, sans-serif; }

a { text-decoration: none; }

img { max-width: 100%; }

/****Main Heading****/

header { float:left; padding: 150px 0 0 10px; width: 100%; background: #cecece; }

.main-header { color: #808080; line-height: 0; }

h1 { font-size: 4em; font-family: 'Poiret One'; }

span { font-size: 1.5em; font-family: 'Poiret One'; }

logo {

float:left; text-align:left; margin-left: 5%; width: 45%; }

logo a, a:visited {

color: #808080; }

/****Navigation****/

nav { background: none; float: right; text-align:right; margin-right: 5%; font-family: 'Poiret One'; width 45%; padding-top: 50px; }

nav ul { list-style-type: none; }

nav li { display: inline-block; padding: 0 15px 0 15px; }

/****Wrapper****/

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; padding-top: 20px; }

/****About****/

.contact-info { list-style-type:none; padding:0; margin:0; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; color: #808080; }

.contact-info li.mail a { background-image: url(..img/maillogo.png); }

.contact-info li.twitter a { background-image: url(..img/twitterlogo.png); }

/****Contact****/

/****Footer****/

footer { font-size:12px; text-align:center; clear: both; padding-top:50px; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }