Practice Project Help

Hi Alejandro, Not really tested this and there are better ways to do it. But here you go:

1) For this I gave .header p a width of 100% to make it take up full width of its container. Then used text-align center to move it back to the center. This pushes the button onto a new line and keeps them aligned.

.header p {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

2) Created a div around the h2 and p's in your html.

<div class="mainContent">

</div>

Gave it a float: left and width: 65% to align with the main image. Together they take up 100% of the container.

.main img{
    width: 35%; // You had declared % twice here
}
.mainContent {
  width: 65%;
  float: left;
}

3) Gave .jumbotron a background-size: 100% to make the background image fill it's container

.jumbotron {
    background-size: 100%;
}

4) Also noticed in your html you were using capital letters for the h1 and p. This is considered bad practice as presentation should be done through css instead. To it with css I just added text-transform: uppercase to .header p and .header h1, then cleaned up the html.

.header h1 {
  text-transform: uppercase;
}
.header p {
  text-transform: uppercase;
}

Html now looks a little cleaner

    <h1>Innovation Cloud</h1>
    <p>Connect your ideas globally</p>

Forked the pen here so you can see the full code.

Hope this helps :)