My cover photo doesn't show

Question

I just uploaded my test site on my domain and my cover photo doesn't show. Any ideas?? Test site's http://www.jstrange.co.uk/testsite/index.html and it's for my portolio.

Here's my code: <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta charset="utf-8"> <meta name="author" content="Jonny Strange" /> <title>Jonny Strange | A up and coming web designer</title> <meta name="description" content="Hi, Jonny Strange and I'm a up and coming web designer" />

<link rel="icon" type="image/x-icon" href="/favicon.ico">

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" href="assets/css/normalize.css"> <link rel="stylesheet" type="text/css" href="assets/css/grid.css"> <link rel="stylesheet" type="text/css" href="assets/css/layout.css"> </head>

<body> <header id="main-header" role="banner"> <div id="header-cover"> <div id="header-title"> <h1>Jonny Strange</h1> <p><span>Interm Web Designer</span></p> </div> </div> <div class="row"> <div class="column12"> <nav id="navigation" role="navigation"> <ul> <li><a href="#personal-profile">Personal Profile</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#work-experience">Work Experience</a></li> <li><a href="#education">Education</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> </div> </header> <section id="personal-profile"> <div class="row"> <div class="column12"> <div class="headline"> <p> <span>Who am I?</span> </p> <h1>Personal Profile</h1> </div> </div> </div> </section> <section id="skills"> <div class="headline"> <h1>Skills</h1> </div> </section> <section id="work-experience"> <div class="headline"> <h1>Work Experience</h1> </div> </section> <section id="education"> <div class="headline"> <h1>Education</h1> </div> </section> <section id="portfolio"> <div class="headline"> <h1>Portfolio</h1> </div> </section> <section id="contact" role="contentinfo"> <div class="headline"> <h1>Contact</h1> </div>
</section> <footer id="main-footer">

</footer>

</body> </html>

/*

Name: grid.css Date: 15/03/15 Version: 1.0 Author: Jonny Strange

Table of Contents

Responsive Screens #Small Screens #Medium Screens #Medium-Large Screens #Large Screens

/***************************************************************** SMALL SCREENS ******************************************************************/ .row { height: 100%; margin: 0 auto; padding: 0 30px; max-width: 100%; }

.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 { width: 100%; }

.column1:first-child, .column2:first-child, .column3:first-child, .column4:first-child, .column5:first-child, .column6:first-child, .column7:first-child, .column8:first-child, .column9:first-child, .column10:first-child, .column11:first-child, .column12:first-child { margin-left: 0; }

.visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } .visible-desktop { display: inherit !important; } /***************************************************************** MEDIUM SCREENS *****************************************************************/ @media screen and (min-width: 480px) { .row { width: 470px; /*background: rgba(244,68,71,.4);/ }

.column1
{
    width: 20px;
}

.column2
{
    width: 60px;
}

.column3
{
    width: 100px;
}

.column4
{
    width: 140px;
}

.column5
{
    width: 180px;
}

.column6
{
    width: 220px;
}

.column7
{
    width: 260px;
}

.column8
{
    width: 300px;
}

.column9
{
    width: 340px;
}

.column10
{
    width: 380px;
}

.column11
{
    width: 420px;
}   

.column12
{
    width: 460px;
}


.column1,
.column2,
.column3,
.column4,
.column5,
.column6,
.column7,
.column8,
.column9,
.column10,
.column11,
.column12
{
    margin-left: 10px;
    float: left;
    /*background: rgba(142,24,26,.3)*/
}

} /***************************************************************** MEDIUM-LARGE SCREENS ******************************************************************/

/***************************************************************** LARGE SCREENS ******************************************************************/

/*

Name: layout.css Date: 19/03/15 Version: 1.0 Author: Jonny Strange

Table of Contents

General Styles body section

Layout Styles #main-header #main-cover #headline #duties

/***************************************************************** BODY STYLES ******************************************************************/ body { font-family: Helvetica, sans-serif; }

a { text-decoration: none; }

section { position: relative; }

img { max-width: 100%; }

/***************************************************************** HEADER STYLES ******************************************************************/

main-header

{

}

header-cover

{ height: 25rem; background: url('../img/bg-cover.jpg') no-repeat center; background-size: cover; }

header-title

{ position: relative; display: inline-block; font-family: 'Kaushan Script', cursive; font-size: 2em; font-style: normal; color: #1f268e; text-align: center; margin: 3.5em 0 0 0.7em; margin-left: 0.7em; border: 1px solid #1f268e; }

header-title h1

{ margin: 0 0.2em 0.4em; padding: 0; }

header-title p

{ position: absolute; padding: 0; top: 4rem; left: 0; right: 0; font-family: Helvetica, sans-serif; }

header-title p span

{ padding: 0; background: rgba(15, 13, 13, .7);
}

{

}

nav ul { list-style: none; }

nav ul li { }

nav ul li a { }

/***************************************************************** HEADLINE & DUTIES STYLES ******************************************************************/ .headline { position: relative; display: inline-block; border: 1px solid; padding: 0.8em; text-align: center; }

.headline h1 { margin: 0; padding: 0; }

.headline p { position: absolute; top: -25px; left: 0; right: 0; }

.headline p span { padding: 0 1em; background: #fff; }

/* Pacifico|Courgette

font-family: 'Pacifico', cursive; font-family: 'Courgette', cursive; */

Welcome to the Treehouse Community

Looking to learn something new?

Jonny Strange