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

Oliver Sewell
Oliver Sewell
16,425 Points
Posted by Oliver Sewell
Oliver Sewell
16,425 Points

Hi ! , i was wondering how do i add a margin to my image to seperate it from the text without it going onto a new line?

http://codepen.io/OliverSewell/pen/bdJXNw

im trying to give the image a margin-left: without it going onto a new line im a little confused should i be using box-sizing: border-box; ??

also how would i make the text box the same size as the image?

sorry im a newb lol

2 Answers

Stefan Dietz
Stefan Dietz
2,360 Points

Hi Oliver,

horizontal margin will always move your container to next next line because it will be added to the two percentage widths that already sum up to 100%.

I would recommend one of the following solutions:

a) Use a percentage value for the margin (i.e. 5%) and substract it from one of the containers. I did this for the blue container in the following pen.

b) Assign your text-containers a padding and box-sizing: border-box so the padding won't affect the outer size. I did this for the red container.

The pen: http://codepen.io/anon/pen/rVbXWr

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

Thankyou stefan , do you also know how i could get the nav and the logo to the top of the page?