Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Eric Conklin
Eric Conklin
8,350 Points

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
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!

Eric Conklin
Eric Conklin
8,350 Points

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

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