Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

IMG class will not center appropriately

I set the margin-left and margin-right values to auto in the css of my page but still no dice. The blue triangle still hangs over to the far left side. It should remain in the center of the page at all times.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sat, 21 Nov 2015 22:11:09 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Event Lander</title>
  </head>
  <body>
  <!--Blue Header-->
  <div class="header-rectangle">
       <h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
  </div>
  <!--Header image and form-->
  <div id="header-bg" align="center">
       <div id="cta-rectangle">
            <h1>Hello!</h1>

       </div>
  </div>
  <div class="blue-separator">
       <h1>Hello! This is my blue separator</h1>
  </div>
  <img src="http://ppc-genius.com/wp-content/uploads/2015/11/bluetri.png" class="blue-triangle">
  </body>
</html>

And my CSS:

* {
  margin: 0px;
}

/*Blue header*/

.whiteheadline {
    font-size: 48px;
    font-family: "Open Sans";
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.header-rectangle { 
    background-color: rgb(104, 115, 251);
    text-align: center;
    line-height: 143px;
}

#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/sliceimage.png);
background-repeat:no-repeat;
height:426px;
width: 1024px;
position: relative;
margin: 0 auto;
z-index: 1;
overflow:auto;
}

/*CTA Rectangle and form*/

#cta-rectangle {
  background-color: rgb(224, 223, 223);
  box-shadow: 0px 9px 11.18px 1.82px rgba(0, 0, 0, 0.55);
  position: relative;
  width: 451px;
  height: 334px;
  z-index: 2;
  margin: 40px auto;
}

/*Body text and graphics*/
.blue-separator {
  background-color: rgb(103, 111, 216);
  position: relative;
  width: 1024px;
  height: 128px;
  margin: 0px auto;
}

.blue-triangle{
margin-left: auto;
margin-right: auto;
position: static;
float: none;
 }

1 Answer

Jakob Wozniak
Jakob Wozniak
17,896 Points

So if you don't set a value for "width", the default display property is set to "block", which has a width that takes up the whole width of the window. So even if you have auto margins, there isn't actually room to use them. Try setting the display to "inline-block", or setting the width manually.

I hope this helps!

Added: display: inline-block; width: 112px;

No dice. Still stuck to the far left side...