Btn-main button stylish


 <div class="jumbotron">
      <div class="container">  
        <div class="main">
          <h1>We are Broadway</h1>
          <a class="btn-main" href="#"> Get Started</a>

After this addition to code, the button doesn't turn grey


You need to format all your html code otherwise we cannot see it all, or post it as a codepen link,


I fixed it. Maybe because of late response of network!


Great! Okay so what I am seeing is that you want a button.

Thanks to HTML5 there is a <button> tag you can use to acheive what you want and also attach a link to it.

Try this,

<a href="#"><button>Get Started</button></a>


I'm ok! Thanks!
The problem i got this time is that i cannot make the image of the project float left of the text.


html, body {
margin: 0;
padding: 0;
background-image: url("");

body {
font-family: 'Roboto', sans-serif;
font-weight: 100;

.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;

/* Header */
.header {
height: 800px;
text-align: center;

color: white;

.header .container {
position: relative;
top: 200px;

.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;

@media (min-width:850px) {
.header h1 {
font-size: 120px;

.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;

.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;

/* Nav */
.nav ul li {
list-style: none;
margin: 10 auto;
padding: 30px 0;
text-align: center;
word-spacing: length;

.nav ul{
border: 1px solid black;
border-width: 2px;


/* Main */
.main .container {
margin: 80px auto;

/* Jumbotron */
.jumbotron {
height: 600px;
text-align: left;

.jumbotron .container {
position: relative;
top: 220px;

/* Footer */
.footer {
font-size: 14px;

/* Media Queries */
@media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;

.main, .jumbotron {
padding: 0 30px;

.main img {


You defined the image in your html selector meaning you want to cover the whole web view. Is that what you wanted?


I want the img to float left of the text. But ideally i want to make the image a llittle bit smaller.


okay I will not write the css code for you but I will show you what you can use achieve your goal.

1) use background-size: property to set the size of your image.

2) use background-repeat: to make sure only one image is being displayed

3) use background-position to set the position of your image

4) for finer adjustment set the image's position to relative and then use margin-right, left, top, bottom to move it to your desired position, position: relative


I think i need to change the img properties, not the background properties.