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!
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
Jacob Tennyson6,240 Points
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.
Cosmin Cioaclă21,339 Points
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.
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).
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 Russell8,678 Points
Have you tried
I'm not entirely sure that's the solution, but it's worth a try.