html, body {
margin: 0;
padding: 0;
}
.header{
background-color: #333333;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.jumbotron {
background-image: url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
height: 953px;
width: 1435px;
background-repeat: no-repeat;
background-size: cover;
}
.nav {
margin: 0;
padding: 20px 0;
}
.nav li {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
display: inline;
}
.main {
position: relative;
top: 180px;
text-align: center;
}
.main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 80px;
text-transform: uppercase;
}
.btn-main {
background-color: #606060;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
border: 1px solid #333;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 50px;
margin-bottom: 40px;
}
.clearfix {
clear: both;
}
.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}
.footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
@media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
type or paste code here
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<ul class="nav">
<li>About</li>
<li>Work</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>We are Broadway</h1>
<a class="btn-main" href="google.com">Get Started</a>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg">
<h2>Design</h2>
<p>Make your projects look great and interact beautifully.</p>
<a class="btn-default" href="google.com"> Learn More</a>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
<a class="btn-default" href="google.com"> Learn More</a>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
<a class="btn-default" href="google.com"> Learn More</a>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="footer">
<div class="container">
<p>© Broadway 2015</p>
</div>
</div>
</body>
</html>
Hello, newbie here…
I’d just like to know why I am experiencing this issue, and where I went astray in my code.
This link leads to the website that I am supposed to copy. You’ll notice the nav bar fits nicely, while I have two chunks missing.
https://s3.amazonaws.com/codecademy-content/projects/broadway/index.html
Hello,
^This bit of code max-width is stopping the header from being bigger thus the space. Removing this line will sort it out: max-width: 940px
Thank you for your reply! I went ahead and edited that bit out, and while your solution makes perfect sense I have seen nothing change. The problem still persists
Paste in a screen shot and your updated code please
To my understanding you nav bar is not big enough for what I did was
<ul class="nav">
<li>About</li>
<li>Work</li>
<li>Team</li>
<li>Contact</li>
</ul>
Then in CSS file I did this
.nav {
background-color: #333333;
width: 100%;
height: 20px;
margin: 0;
padding: 20px 0;
}
As you can see I made the container 100% as now it will go the full width on any resolution.
And the height I made personally so I see how big it is as I dont want it to be big
And for the list it self I did not alot
.nav li {
margin-left: 100px;
display: inline-block;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 20px;
list-style-type: none;
}
I made it so it has no dots or numbers neither does it stack down because its display is set to inline block so now it sits next to each other and I made the margin-left: size personally so I know how far apart the words are
jojoga
February 14, 2017, 1:27pm
8
hi there,
i recommend you change this:
into this:
.jumbotron {
background-image: url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
height: 953px;
width:100%;
/*width: 1435px;*/
background-repeat: no-repeat;
background-size: cover;
}
instead of giving a width in pixels define:width:100%;
.
this fixed your problem when I tested this code.
check out this fiddle: