After following the instructions from an old HTML and CSS introduction on , I successfully created my first website. However, the code works perfectly on a special constructor page, but once I try to view it on a browser, the HTML and CSS don't seem to link up. I attempted to upload the files to a server, followed various tutorials, but still can't figure out the issue.
Could someone please point out where I might be going wrong? Could it be related to the CSS style sheet references at the top of the HTML?
Below is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
</ul>
<ul class="pull-right">
<li><a href="#">Services</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
...
<p class="neighborhood-guides">...</p>
...
</body>
</html>
...
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.jumbotron {
background-image:url('http://pcmedcenter.com/wp-content/uploads/2015/03/banner12-1920x600.jpg');
height: 470px;
background-repeat: no-repeat;
background-size: cover;
}
...
.neighborhood-guides p {
font-size: 15px;
margin-bottom: 13px;
}