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 CSS Layout Techniques Float Layout The Float Clearfix

Jacob Tennyson
Jacob Tennyson
6,240 Points
Posted by Jacob Tennyson
Jacob Tennyson
6,240 Points

anchor elements

So Im trying to put a <a><h2>welcome</h2></a> link on my web page right below my title and i've got it centered and i like the way it looks however the element takes up the whole background width of the screen so even if you hover way to the right or left it activates the link. Ive tried display: inline-block, float:center;, text-align:center , and i just cant seem to figure out how to reduce the background size of the block element. i really just want it around the word not the whole page.

2 Answers

Cosmin Cioaclฤƒ
Cosmin Cioaclฤƒ
21,339 Points
Cosmin Cioaclฤƒ
Cosmin Cioaclฤƒ
21,339 Points

Hi Jacob,

The behavior you are describing seems to point to a display setting of block for your anchor element. If you want to have an anchor with a width that spans just the text you have two options.

  1. Set display: inline-block on your anchor element and a text-align: center to its parent element (you should add some padding to the anchor too, it looks better).

  2. Set a width for your anchor, let's say 150px. Then, set margin: 0 auto also, so it centers itself inside its parent element.

Hope that helps, Cosmin.

Katye Russell
Katye Russell
8,678 Points
Katye Russell
Katye Russell
8,678 Points

Have you tried

box-sizing: border-box;

I'm not entirely sure that's the solution, but it's worth a try.

Good luck,

Katye