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

Faisal Rahimi
Faisal Rahimi
4,019 Points

css

Hi all,

I am trying to add border to my image in the middle of my page by doing the following;

In html is this;

<div id="img1">
 <img src="img/babies.jpg" alt="babies photo">
</div>

In css is this;

#img1{
border: 8px solid #000000;
}

Now the border is added but the right side of it is stretched as far as the browser page and i cannot attach the right side to the image.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hello Faisal.

I have edited your question a little bit so that it matches the forum guidelines for pasting code. Please have a quick read here for future references: https://teamtreehouse.com/forum/posting-code-to-the-forum

Vitto

Akhter Rasool
Akhter Rasool
8,597 Points

Try to add padding in your div element and set margins so that there is some space between the border and the image, and between the border and page.

3 Answers

Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hey Faisal.

I have tried your pieces of code and I do not have that behavior that you describe.

Have you provided all the css that you wrote? Maybe you have some css for the divs that is resulting into this issue?

Let me know

Vitto

Jessica DiPonziano
seal-mask
.a{fill-rule:evenodd;}techdegree
Jessica DiPonziano
Full Stack JavaScript Techdegree Student 20,782 Points

This code should work. Like Vittorio said, do you have other css that could be effecting it? Also you can try

#img1 > img {
border: 8px solid #000000;
}
Faisal Rahimi
Faisal Rahimi
4,019 Points

Hi Guys, the following is my css that covers the above css;

rapper{

max-width: 1150px; margin: 0 auto; padding: 0 5%; }