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

JavaScript Treehouse Club - MASH MASH - CSS Changing Stuff in Your Style Sheet

Posted by Mohammad Zryab
Mohammad Zryab
4,109 Points

Changing the sizing of my image, causes it go go off-center

Here is the code that I've been working on:

https://w.trhou.se/hflno29v2k

I've included an image of Arnold and since the image is so huge I want to downscale it. But whenever I change the width (under the style.css) for some reason the image gets thrown towards the left.

In order to change the sizing, I've only been adjusting the sizing below from the .logo (instead of a width of 100% I changed it to 60%). Let me know if this makes any sense and if you can point me in the right direction. Thanks!

.logo{ width: 60%; }

Daniel H.J. Chen
Daniel H.J. Chen
12,888 Points
Daniel H.J. Chen
Daniel H.J. Chen
12,888 Points

You have put an image (an inline element) inside .logo (a block element). By default the image is going to stick to the left of its container, so if you set the image width to be smaller then it will appear to be thrown to the left. To make image center inside the container, you have a few ways:

Method 1: Leave the container unchanged, but change image to a block element.

.logo img {
  width: 50%; /* Anything smaller than the container width will work. */
  display: block;
  margin: auto;
}

Method 2: Change the container alignment setting, and leave the image as an inline element.

.logo {
  text-align: center;
}
.logo img {
  width: 50%; /* Anything smaller than the container width will work. */
}

Method 3: Alternatively, if you want to control the image by setting the width of .logo, then you need to make sure the image changes its size relative to the container, namely setting image width to be 100%.

.logo {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.logo img {
  width: 100%;
}

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

:point_right: You need to adjust the width of the image, not the image's container.

While your image remained centered inside the container, by reducing the width of the container, it caused everything in it to shift left. Also, you may have noticed that your image was not getting any smaller.

So, instead of this:

.logo{
  width: 60%;
}

.logo img {
  margin: 0 auto;
  display: block;
}

try this:

.logo img {
  width: 60%;
  margin: 0 auto;
  display: block;
}
Mohammad Zryab
Mohammad Zryab
4,109 Points
Mohammad Zryab
Mohammad Zryab
4,109 Points

Thanks so much! :D