Can't get bg image full width and contacts to float

Question

I'm trying to get the bg image on the contacts section full width but the info contained within 1020px. I've tried creating separate divs and creating classes for them but I'm really struggling. I also can't get the 2 contacts to float side by side, ive tried the same way as for the "steps" section but to no avail.

here is my HTML:

<!DOCTYPE HTML>

<html>

<head>
    <meta charset="utf-8">
    <title>BurstBuster&trade;</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <header class="main row">
        <div class="container">
            <h4 class="logo">BurstBuster&trade;</h4>
            <nav>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Order</a></li>
                </ul>
            </nav>
        </div>
        <div class="intro">
            <h1>Burst Geyser &amp; Leak Detection</h1>
            <h2>Receive Instant Notifications via SMS</h2>
            <button class="button">Find out more</button>
        </div>

    </header>


    <div class="wrapper">
        <div class="howitworks">
            <h3>How does it Work?</h3>
            <p>
                BurstBuster™ has been designed to be easy to use and without need of any complicated
                <br/>or lengthy installations. Have your BurstBuster™ device up and running in 3 simple steps
                <br /> and never have to worry about a burst geyser ever again.
            </p>
        </div>

        <div class="steps">
            <div class="steps-inner">
                <h5>Step 1</h5>
                <img class="img-round" src="http://placehold.it/250x250" />
                <p>
                    Connect your BurstBuster&trade; device to a power source.
                </p>
            </div>
        </div>

        <div class="steps">
            <div class="steps-inner">
                <h5>Step 2</h5>
                <img class="img-round" src="http://placehold.it/250x250" />
                <p>
                    Place the water sensor at the bottom of your drip tray.
                </p>
            </div>
        </div>

        <div class="steps">
            <div class="steps-inner">
                <h5>Step 3</h5>
                <img class="img-round" src="http://placehold.it/250x250" />
                <p>
                    Get an SMS notification when your geyser bursts or leaks.
                </p>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div class="row contact">
            <div class="container">
                <h3>Contact Us For More Information</h3>
                <div class="jacques">
                    <img class="img-round" src="http://placehold.it/100x100" />
                    <p>Jacques Surname</p>
                    <p>123 456 7890</p>
                    <p>jacques@burstbuster.co.za</p>
                </div>

                <div class="gordon">
                    <img class="img-round" src="http://placehold.it/100x100" />
                    <p>Gordon Surname</p>
                    <p>123 456 7890</p>
                    <p>Gordon@burstbuster.co.za</p>
                </div>
            </div>
        </div>
    </div>
    <footer class="main-footer">
        <p>
            &copy; BurstBuster&trade; 2016
        </p>
    </footer>
</body>

</html>

And this is my CSS:

body {
  margin: 0;
  color: #999999;
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 200;
}

h1 {
  color: white;
  font-size: 3rem;
  margin-bottom: 0;
  clear-float: all;
}

h2 {
  color: white;
  font-size: 1.875rem;
  font-weight: 200;
  margin-top: 10px;
}

h3 {
  color: #030c27;
  font-size: 2.25rem;
  margin-top: 120px;
}

h4 {
  color: white;
  font-size: 1.875rem;
  margin-top: 0;
  padding-top: 20px;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 1rem;
}

p {
  line-height: 1.3;
  font-size: 1.1rem;
}


/********************************
NAVIGATION
*********************************/

nav {
  color:white;
}

nav ul {
  float: right;
  padding-top: 10px;
}

nav ul li {
  display: inline;
  margin-right: 30px;
}

nav ul li a {
  text-decoration: none;
}

nav ul a:visited {
  color: white;
}


/********************************
Main styles
*********************************/

.logo {
  margin: 0;
  float:left;
  margin-left: 50px;
}

.main {
  max-width: 100%;
  background-color: #1da8e2;
  background-image: url('../img/water_bg.jpg');
  background-size: cover;
  height: 650px;
  margin-top: 0;
  clear: both;
}

.intro {
  clear:both;
  padding-top: 160px;
  text-align: center;
}

.wrapper {
  max-width: 1020px;
  text-align: center;
  margin: 0 auto;
}

.row {
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 1020px;
}

.contact {
    background-image: url('../img/water_bg_2.jpg');
    background-size: cover;
    font-family: helvetica;
    color: white;
    text-align: center;
    padding: 40px 0;
}

.jacques {
  clear: left;
}

/********************************
Layout styles
*********************************/

.steps {
  width: 33.333333%;
  margin-bottom: 90px;
  background-color: white;
  float:left;

}

.steps-inner {
    margin: 10px;
    padding: 20px;
    box-shadow: 0px 0px 20px #d7d7d7;
  border-radius: 10px;
}

img.img-round {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.howitworks {
  margin-bottom: 100px;
}

.main-footer {
  background-color: #081d55;
  height: 80px;
  margin-top: 0;
  clear:both;
}

.main-footer p {
  text-align: center;
  padding-top: 30px;
}

.main-footer p {
  margin-top: 0;
}


/********************************
button styles
*********************************/


.button {
    background-color: #f7941d;
    box-shadow: 0 4px 0 #be6800;
    border-radius: 5px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer
}

/********************************
Media Quesries
*********************************/


@media (max-width:1000px) {
  .steps {
    float:none;
    width:100%;
    margin-bottom: 30px;
  }

}

Answer 1 · 2016-08-28T19:39:07Z

August 28, 2016 7:39pm

I played around with your site a little bit and came up with these solutions. See if this works:

1) Your wrapper div was overriding the container div making your width a max of 1020 and not allowing the image to be full width. I rearranged them to look like this: <div class="container"> <div class="row contact"> <div class="wrapper"> This did create and issue with the image I was using for an example and I had to give the .contact div a top margin so it would not overlap the previous content. Not sure if you will have this issue with your image.

2) Use inline-block on your contact div's to make them next to each other. I added this line of code to your css

.gordon, .jacques {display: inline-block; padding: 10px;}

in place of where you were using float .jacques { clear: left; }

Hope this helps.
Mindy

Answer 2 · 2016-08-29T07:08:59Z

August 29, 2016 7:08am

Thank you, Mindy, You're a star! I've been struggling for a week with this.

Answer 3 · 2016-08-29T15:26:00Z

August 29, 2016 3:26pm

Your welcome! It was fun to help. Your site looks great. Good luck.

Answer 4 · 2016-08-30T13:52:36Z

August 30, 2016 1:52pm

Thanks! ;)

Welcome to the Treehouse Community

Looking to learn something new?

Shannon Essers

Shannon Essers

Can't get bg image full width and contacts to float

4 Answers

Mindy Sandilands

Mindy Sandilands

Shannon Essers

Shannon Essers

Mindy Sandilands

Mindy Sandilands

Shannon Essers

Shannon Essers