CSS not showing on live site

Question

 * { margin:0; padding: 0; border:0; } html, body{ background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color:#ffffff; ; padding-bottom:25px; } .wrapper{ max-height: 100%} header{ max-width:100%; background-color: #107CBD; /* padding-top: 5%;*/ padding-bottom: 0.5%; } .left-col{ max-width:35%; float:left; margin-left: 5%; margin-top: 2%;} .right-col{ width:70%; float:right; } .right-col ul{ width: 100%; } .right-col ul li{ list-style:none; float: right; display:block; padding-top:.4%; margin-left:1%; padding-right: 1.8%; } .right-col li a{ text-decoration:none; color:white; } h1{ clear: both; width: 50%; font-family:'Noto sans', 'sans serif'; font-weight: 100; color: white; font-size: 2em; margin:0 auto; text-align: center; padding-bottom: 1%; } h2{ clear: both; width: 20%; font-family:'Courgette', 'cursive'; font-weight: 200; color: white; font-size: 2em; margin:0 auto; text-align: center; padding-bottom: 1%; } h4{ clear: both; width: 10%; font-family:'Noto sans', 'sans serif'; font-weight: 100; color: white; font-size: 2em; margin:0 auto;} sup{ line-height:0; font-size:65%; } @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; left:0%; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #menu-button { display: none; } #cssmenu { width: auto; font-family: Raleway, sans-serif; line-height: 1; } #cssmenu > ul { background: #505050; } #cssmenu > ul > li { float:left; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; left: 38% } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > a { padding: 16px 20px; font-size: 14px; color: #ffffff; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; background: #505050; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } #cssmenu > ul > li.active > a { color: #107CBD; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #107cbd; -webkit-transform: rotateX(90deg) translateY(-23px); -moz-transform: rotateX(90deg) translateY(-23px); transform: rotateX(90deg) translateY(-23px); -ms-transform: none; } #cssmenu > ul > li > a::before { position: absolute; top: 100%; left: 0; z-index: -1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 16px 20px; color: #107cbd; background: #1d1d1d; content: attr(data-title); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before { background: #505050; } #cssmenu.small-screen { width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul { width: 100%; text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center { float: none; display: block; border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover { color: #107cbd; -webkit-transform: none; -moz-transform: none; transform: none; -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before { display: none; } #cssmenu.small-screen #menu-button { display: block; padding: 16px 20px; cursor: pointer; font-size: 14px; text-decoration: none; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; background: #505050; } #cssmenu.small-screen #menu-button:after { content: ""; position: absolute; right: 20px; top: 17px; display: block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; width: 22px; height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after { border-top: 2px solid #107cbd; border-bottom: 2px solid #107cbd; } #cssmenu.small-screen #menu-button:before { content: ""; position: absolute; right: 20px; top: 27px; display: block; width: 22px; height: 2px; background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before { background: #107cbd; } div nav ul li{ text-align: left; display: inline; width: %; float:left; margin-right: .8em; font-family: 'Noto Sans'; } li.changeBackground { background-color: #505050; } li.changeBackground:hover { background-color: #777777; } li.changeBackground:active { background-color: #107CBD; } .homepage-hero-module { border-right: none; border-left: none; position: relative; } p{ position:relative; width: 30%; padding:1em 1.5em; margin:2em auto; color: #fff; background:#107CBD; overflow: hidden; font-family:'Noto Sans'; } p:before{ content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: #fff #fff #505050 #505050; background: #505050; -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px rgba(0,0,0 0.2); /* Firefox 3.0 damage limitation*/ display: block; width: 0; } p.rounded{ -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; } .p.rounded:before{ border-width: 9px; border-color: #fff #fff transparent transparent; -moz-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } h3{ font-family:'Noto-Sans', sans-serif; } h5{ font-family:'Noto-Sans', sans-serif; float: right; margin-top:10px; } #footer{ margin: 1px; height:100px; width: 100%; border-top:3px solid #107CBD; clear: both; color: #fff; line-height:23px; background-color:#505050; text-align:center; position:fixed; font-size:12px; bottom:0px; vertical-align:baseline: } footer { width: 100%; padding-top: 3.5%; padding-bottom: 9.5%; background-color: #505050; border-top:8px solid #107CBD; position:fixed; text-align:center; } } #footer ul li a: hover{ color: #000; background-color:#777777; } #footer ul li a{ text-decoration: none; font-family: Noto-sans,sans serif; padding:2em 1em; color: #fff; } #footer ul li a: hover{ color: #000; background-color:#777777; } footer ul { width: 100%; /* margin-right: 25%;*/ } footer ul li { float:0px; padding-right:2%; margin-right:3%; display:inline; font-family:Noto sans,sans serif; font-size:12px; } #footer ul li a{ text-decoration: none; font-family:'Noto-sans',sans serif; padding:2em 1em; color: #fff; } div.footer-social{ float:right; padding-right:10%; margin-right:5%; display:inline; margin-top:-2.8%; 

 <!DOCTYPE html> <html lang="en"> <head> <title>index</title> <meta charset="UTF-8"> <link rel="shortcut icon" href="path to icon/favicon.ico"/> <link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'> <title>Dawn's website</title> <link rel="stylesheet" type='text/css' href="index.css"/> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wrapper"> <header> <div class="left-col"> <img src="images/onebuglogoforwebdt.jpg" height="64" width="60" alt="One Bug logo" id="logo"&nbsp;> </div> <div class="right-col"> <ul class="social-icons"> <li><a href="mailto:Dawn@onebugdesign.com"> <img class="Email"<img src="images/email-icon32.png" style="margin:0px -9px"></a></li> <li><a href="https://pinterest.com/rasberry14/target=_blank"><img src="images/Pinterest-icon.png"style="margin:0px -9px"></a></li> <li><a href="https://twitter.com/fraggleart/target=_blank"><img src="images/Twitter-2-icon.png" style="margin:0px -9px"></a></li> </ul> </div> <div class="header-slogan"> <h1>One Bug Design</h1> <div class="tag-line"> <h2>Designed to create<sup><small>&#153</small></sup></h2> </div> </header> <aside> <nav id='cssmenu'> <ul> <li class='active'> <a href='index.html'>Home</a></li> <li> <a href="../portfolio/portfolio.html">Portfolio</a></li> <li><a href="../finds/finds.html">Finds</a></li> <li><a href="../contact/contact.html">Contact</a></li> </ul> </nav> </aside> <main> <section class="section-1"> <p> Dawn here, your friendly graphic designer. Do you need someone to make your brand sparkle with desire? Someone to show your logo some love. Do you need someone who truly enjoys the overall creative process and has an eye for great design? Someone who is fluent in the ways of the Adobe CC Master. Someone who will listen and fulfill your visual communication needs. Someone who is determined and who has Ideation? Well click no further! You have arrived at your destination. ........<strong>Welcome!</strong></p> </section> <section> <h3>Software skills</h3> <div class="wrapper"> <div class="icon"><br> <img src="images/Adobe-Ai-icon.png" style="margin:14px" width="40px"/> <img src="images/Adobe-Id-icon.png" style="margin:14px" width="40px"/> <img src="images/Adobe-PS-icon.png" style="margin:14px"width="40px"/> <img src="images/bridge-icon.png"style="margin:14px" width="40px"/> <img src="images/Camera-icon.png"style="margin:14px" width="40px"/> <img src="images/HTML-5-icon.png"style="margin:14px " width="40px"/> <img src="images/css-icon.png"style="margin:14px -3px" width="40px"/> <img src="images/Office-icon.png"style="margin:13px" width="40px"/></div> </section> <section> <div class="text"> Illustrator | &nbsp; Indesign | &nbsp; Photoshop | &nbsp; Bridge | &nbsp; DSLR | &nbsp; HTML5 | &nbsp; CSS | &nbsp; Microsoft Office | &nbsp; </div> </section> <aside></aside> <br> </main> <footer> <ul stlyle="list-style-type:none"> <li class="changeBackground"> <a href="index.html">Home</a></li> <li class="changeBackground"> <a href="../portfolio/portfolio.html">Portfolio</a></li> <li class="changeBackground"><a href="../finds/finds.html">Finds</a></li> <li class="changeBackground"> <a href="../contact/contact.html">Contact</a></li> <li>&copy;2015 One Bug Design All Rights Reserved</li> </ul> </br> <div class="footer-social"> <a class="social Twitter" <ahref="https://twitter.com/fraggleart" class="twitter-follow-button" data-show-count="false">Follow @fraggleart</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <a class="social Pinterest" <a href="https://pinterest.com/rasberry14"><img class="Pinterest"img src="images/Pinterest-icon.png"/></a> <a class="social Email" <a href="mailto:DawnThomas@onebugdesign.com"> <img class="Email"<img src="images/email-icon32.png"/></a> </ul> </div> </footer> </div> </body> </html> 

My CSS does not seem to be appearing on my live site. I have tried the following: - making sure that the CSS and HTML files are in lowercase
- Checking the spelling - Making sure that the CSS and HTML are in one subfolder. -Linking my stylesheets

My folder is setup as follows: - HTML -CSS -images The images seem to appear fine on CSS DESk and in Brackets. What am I missing? http://www.cssdesk.com/Mb6Z2

Answer 1

html,
body{
    background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#ffffff;
    ;/*remove this i think this issue*/
    padding-bottom:25px;
}