Code not working on a real server


Hi Guys,
I'm working on "Learn More: Grid" and everything is going fine inside the online editor.
But when I copy the code inside the Codecademy editor to a real index.html/main.css file using a program like Sublime Text, the website doesn't look like it does in the Codecademy editor.

Things that happen.

  1. The background image in the Jumbotron doesn't show up.
  2. The navigation menu is using bullet points and is not positioned properly.

So, I'm using the exact code inside the Codecademy editor and using it in a "real life" situation, but I'm getting different results.
I hope anybody here can help me out, I love Codecademy!






can you pls paste in the header code then I can have a look..



@zainabrawat Hi, thanks for your fast reply, this is my header.

    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="main.css">



the css file main.css is it saved in the same folder as you html ?



Good one! No it wasn't, rookie mistake.
But now, the website is still not acting like in the Codecademy editor.


@webmaster70330 what's different?

Can u send me screen shot of your code and what it looks like on codecademy


Your probably missing to add a html file. To add on @zainabrawat point can you please write like your folder arrangments. Thankyou



This is the codecademy code

My folder arrangements is like this, I already css/main.css to my code to make it communicate with the right file.
The problem now is that the image is not loading and certain things are out of balance.

css --> main.css



This is my code


Would you mind copy pasting that background image. Seems that is what is causing the problem...


@webmaster70330 your CSS pls


It's this one.

Code looking like this.

.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;

.nav li {
display: inline;

.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;

.jumbotron .container {
position: relative;

.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;

.jumbotron p {
font-size: 20px;
color: #fff;

.learn-more {
background-color: #f7f7f7;

.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;

.learn-more a {
color: #00b0ff;


Sounds like this is an issue about folder overall. I will look in to the problem. And it will also would be lovely if you can read this. Thankyou


Hi, thank you so much!
I will work on better formatting of my code next time. :slightly_smiling:



What are the HTML-div's doing in line 46 and 53 ???


@webmaster70330 pls mark this post answered..

To avoid confusion


Yea what @leonhard_wettengmx_n is trying to say is that you should close the divs. Are you fine now @webmaster70330?


Yes, thank you, it works now.