Stylizacja list ol

Witam

Od razu zaznaczam że jest to mój pierwszy post tutaj.

Próbuję nauczyć się tworzenia stron www. Jestem na 3 odcinku kursu CSS. Wszystko jest fajnie do momentu gdy zaczyna się część z wykonaniem menu. Owszem stworzyłem je, ale stylizacja w CSS nie działa mimo, że wykonuje wszystko w taki sam sposób jak na filmiku. Próbowałem znaleźć jakiś błąd, literówkę czy cokolwiek, ale powiem szczerze, że zgłupiałem. Ściągnąłem nawet paczkę zip żeby porównać kod ale za cholerę nie wiem o co chodzi.

Proszę o jakąś pomoc :)

Jest to 49 minuta filmu więc kod nie jest skończony ale według filmu powinno wystylizować menu do pozycji poziomej do lewej krawędzi strony. Niestety nie dzieje się tak nie wiem dlaczego.

body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
margin: 0 !important;
}
.wrapper
{
	width: 100%;
}
.header
{
	width :100%;
	padding: 40px 0;
}
.logo
{
	width: 450px;
	font-size: 48px;
	margin-left : auto;
	margin-right: auto;
}
.footer
{
	text-align: center;
	background-color: #222222;
	padding: 30px;
}
.content
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding-top: 10px;
}
.nav
{
	width: 100%;
	padding: 10px 0;
	background-color: #c34f4f;
	text-align: center;
	border-top: 1px solid #751b1b;
	border-bottom: 1px solid #751b1b;
.socials
{
	width: 100%;
	text-align: center;
	background-color:#292929;
}
.socialdivs
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.fb
{
	width: 250px;
	height : 155px;
	float: left;
}
.fb:hover
{
	background-color: #4668b3;
}
.gplus
{
	width: 250px;
	height : 155px;
	float: left;
}
.gplus:hover
{
	background-color: #d95333;
}
.tw
{
	width: 250px;
	height : 155px;
	float: left;
}
.tw:hover
{
	background-color: #3095d3;
}
.yt
{
	width: 250px;
	height : 155px;
	float: left;
}
.yt:hover
{
	background-color: #d94348;
}
.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}

ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
}
ol > li
{
	float: left;
	width: 150px;
	height:40px;
	border-right: 1px dashed #751b1b;
}

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<title>Retrogranie</title>
	<link href="style.css" rel="stylesheet" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700&amp;subset=latin-ext" rel="stylesheet">
		<link href="css/fontello.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<div class="logo">
			<img src="pad.png" style="float: left"/>
			<span style ="color: #c34f4f">retro</span>granie.com
			<div style= "clear: both"/>
			</div>
		</div>
		<div class="nav">
			<ol>
				<li><a href="#">Strona główna</a></li>
				<li><a href="#">Klasyki NES</a></li>
				<li><a href="#">Gry Filmowe</a></li>
				<li><a href="#">Bijatyki</a></li>
				<li><a href="#">Gry Sportowe</a></li>
				<li><a href="#">O Autorach</a></li>
			</ol>
		
		</div>
		<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat pharetra eleifend. Proin rhoncus consequat augue non consequat. Cras efficitur nisl id odio vestibulum finibus quis id dui. Phasellus ut dui eu metus luctus accumsan. Quisque volutpat eleifend nisl, sit amet dictum velit rhoncus ut. Curabitur non rhoncus eros. Donec quam lectus, tempor sit amet rhoncus efficitur, rhoncus at mauris. Phasellus nulla nunc, pretium ut tincidunt eget, scelerisque id urna. Nullam ut ligula nec nisl ultrices faucibus eget et nulla. Sed nec justo sapien. Etiam consequat iaculis massa, vitae luctus sem malesuada in. Maecenas accumsan nulla at dui imperdiet, ut tempus libero congue. Fusce in ullamcorper felis. Sed porttitor turpis vitae nisi porttitor gravida.</p>
		
		<p>Suspendisse non ullamcorper diam, ut maximus enim. Vivamus felis lectus, ullamcorper ac pellentesque vel, convallis et neque. Nulla ultrices sit amet libero id iaculis. Donec enim tellus, congue in molestie eu, elementum vestibulum orci. Ut faucibus luctus magna vitae egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices sollicitudin accumsan. Aenean ullamcorper turpis felis, sed mollis leo molestie vel. Nunc quis ligula ante. Aliquam laoreet lacus vitae dui dictum euismod.</p>
		
		<p>Integer ultricies gravida mollis. Vivamus luctus sagittis enim vitae ullamcorper. Sed ipsum eros, commodo eu venenatis et, luctus eget velit. Etiam lacinia sollicitudin metus a tempor. Integer ac maximus orci. Proin a ultricies ex. Sed a erat erat. Morbi id malesuada metus. Phasellus quis nulla eu mi dapibus aliquam. Vivamus id nisl vitae lectus sollicitudin consectetur in mattis ipsum. Fusce convallis pretium sem eget vestibulum.</p>
		
		<p>Nulla turpis magna, scelerisque quis sagittis sit amet, consectetur at ante. Nunc non fringilla massa. Vestibulum id malesuada turpis. Sed eu nulla nibh. Proin consectetur metus a purus scelerisque convallis. Vestibulum euismod sem ut urna mollis consectetur. Sed ultricies neque in lectus suscipit rutrum. Duis bibendum blandit magna ut feugiat. Aliquam enim lacus, feugiat ut tortor id, efficitur eleifend magna. Phasellus viverra eget sapien non sollicitudin. Donec rhoncus rutrum est eu egestas. Pellentesque in mi in justo tempor tristique. Proin sagittis enim vitae justo pellentesque, at dapibus nibh egestas. Quisque urna eros, rutrum sed posuere vitae, consectetur in magna. Ut pharetra hendrerit felis, ac volutpat ipsum vehicula non. Aenean quis molestie eros, a porttitor tellus.</p>

		<p>Maecenas vitae interdum lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras cursus, urna et maximus faucibus, nisi nisi venenatis tellus, vel aliquet augue est id diam. Duis fringilla turpis non dui pulvinar vestibulum. Sed quis velit nulla. In hac habitasse platea dictumst. Vivamus at eleifend orci, laoreet finibus mauris.</p>
		</div>
		<div class="socials">
			<div class="socialdivs">
				<div class="fb"><i class="icon-facebook-official"> </i>
				</div>
				<div class="yt"><i class="icon-youtube-squared"> </i>
				</div>
				<div class="tw"><i class="icon-twitter"> </i>
				</div>
				<div class="gplus"><i class="icon-google-plus-circle"> </i>
				</div>
				<div style="clear:both"></div>
			</div>
		</div>
		<div class="footer">
		Retrogranie.com &copy; 2016 
		</div>
	</div>
	<script  src="jquery-3.1.1.min.js"></script>
	<script src="jquery-1.11.3.min.js"></script>

<script>

$(document).ready(function() {
   var stickyNavTop = $('.nav').offset().top;

   var stickyNav = function(){
   var scrollTop = $(window).scrollTop();

   if (scrollTop > stickyNavTop) { 
      $('.nav').addClass('sticky');
   } else {
      $('.nav').removeClass('sticky');
    }
   };

   stickyNav();

   $(window).scroll(function() {
      stickyNav();
   });
   });

</script>
</body>
</html>