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

Faisal Rahimi
Faisal Rahimi
4,019 Points
Posted by 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
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
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
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
Jessica DiPonziano
.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
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%; }