https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_bass
The issue is in the mobile & large screen view. Background color is not seen in large screen view whereas in mobile view background color gets loaded but placement is not proper; there are white spaces. Please help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link rel='stylesheet' href='style.css'/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<div class="jumbotron">
<div class='container'>
<div class="header">
<div class='row'>
<div class='col-md-3 col-xs-3'>
<img src="https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg" width='100'/>
</div>
<div class='col-md-9 col-xs-9'>
<ul>
<li>Features<li>
<li class="borderLi">Download<li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="row">
<div class='col-md-7 col-xs-7'>
<h1>Turn Up the Bass</h1>
<p class="lead">From the newest releases to classic albums, we have the best music for you to enjoy.</p>
</div>
</div>
</div>
</div>
</div>
<div class='supporting1'>
<div class='col-md-6'>
<img src='https://s3.amazonaws.com/codecademy-content/projects/bass/you.svg'/>
</div>
<div class='col-md-6'>
<h2>Music Just for You</h2>
<p class='lead'>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
</div>
</div>
<div class='supporting2'>
<div class='col-md-6'>
<h2>Music Just for You</h2>
<p class='lead'>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
</div>
<div class='col-md-6'>
<img src='https://s3.amazonaws.com/codecademy-content/projects/bass/everywhere.svg'/>
</div>
</div>
<div class='supporting3'>
<div class='col-md-6'>
<img src='https://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg'/>
</div>
<div class='col-md-6'>
<h2>Music Just for You</h2>
<p class='lead'>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
</div>
</div>
</body>
</html>
CSS Code..
html, body {
margin: 0;
padding: 0;
font-family: 'Lato';
color:white;
}
.jumbotron{
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg');
background-size: cover;
height: 600px;
}
.header ul{
list-style: none;
float:right;
}
.header ul li{
display: inline-block;
font-weight: 800;
position:relative;
top: 40px;
}
.header ul li:first-child{
margin-right: 40px;
}
.borderLi{
border: 1px solid #FF003D;
padding: 5px 25px;
background-color: #FF003D;
}
.jumbotron .main h1{
margin-top: 100px;
}
.supporting1,
.supporting3{
background-color: #161718;
}
.supporting2{
background-color: #000000;
}
