I’ve finished all the steps on the Junction project but have two remaining issues : 1. I still cannot get the nav links and the icon on one line. 2. I cannot get the join button to center. I’ve read every forum post on here and know that other people seem to have had similar problems but unfortunately I’ve tried every suggested fix and none of them work. Any help would be appreciated!
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<img src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" class="logo"> </div>
<ul class="nav">
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Meet Junction</h1>
</div>
</div>
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/junction/read.svg" class="circle"/><h2>Read</h2><p>Discover new stories and follow your favorite writers.</p></div>
<div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/junction/write.svg" class="circle"/><h2>Write</h2><p>Create stories about our world, or entirely new worlds.</p></div>
<div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/junction/talk.svg" class="circle"/><h2>Talk</h2><p>Join the conversation by talking with your favorite readers and your fans.</p></div>
</div>
</div>
</div>
<div><a href="#" class="button"><span>Join</span></a></div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: 'Merriweather', serif;
background: url(https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg) no-repeat center center;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/* Header */
.header {
padding: 10px 0;
height: 60px;
background: rgba(0,0,0,.5)
}
.nav {
display: inline;
margin-left: 30px;
padding: 8px 0;
}
.nav li {
display: inline-block;
color: white;
margin-right: 10px;
}
.nav li:hover {
color: green;
}
.logo {
margin: 3px 3px;
height: 36px;
width: 36px;
display: inline-block;
}
/* Jumbotron */
.jumbotron {
position: relative;
top: 50px;
background: none;
color: white;
text-align: center;
text-shadow: 0 2px 3px rgba(0,0,0,.4);
}
/* Supporting */
.supporting {
margin-top: 40px;
text-shadow: 0 2px 3px rgba(0,0,0,.4);
align-content: center;
margin-left: -15px;
margin-right: -15px;
}
h2 {
color: white;
text-align: center;
}
p {
color: white;
}
.circle {
max-height: 150px;
max-width: 150px;
margin-left: 95px;
}
.button {
background-color:rgba(0,255,188,0.5);
padding: 15px;
border-radius: 20%;
}