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

HTML How to Make a Website Debugging HTML and CSS Problems Use Developer Tools

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Aligning Icons Properly and Removing Background

So I recently fixed buttons on one page of my domain: http://www.englishteachertodd.com/lp.html.

However, I'm finding that the adjustments I make on this one page also affect other buttons on other pages that I don't want to be impacted by such coding changes.

I am trying to remove the background from the buttons on this page (www.englishteachertodd.com/) and also this page (http://www.englishteachertodd.com/credentials.html) and to align all icons horizontally so that they run parallel to the header.

I inspected the elements in chrome and found that the width of the unordered lists had something to do with this mess, but I found that when I unchecked "width" in the inspect elements tool, the problem didn't completely go away; it just got smaller.

Can somebody help clarify this problem for me? I've been trying to solve it on my own, but don't seem to be going anywhere.

Any help would be immensely appreciated! This is my very first website!!

Thanks so much in advance.

Sincerely,

Todd

4 Answers

Ben Grieve
Ben Grieve
5,105 Points
Ben Grieve
Ben Grieve
5,105 Points

I haven't checked any of your code, but I can suggest using classes. Give each set of buttons a different class and style them how you want in the CSS.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Okay, I'll do some experimenting with that and see what I can come up with.

Do I need to float the elements in order to make them run horizontally and in such a way that they would adjust spatially to different devices, such as tablet, mobile, and desktop?

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

I just tried making the icons into separate classes and making select specifications in the css file, but to no avail.

I made the margin width and height both 0 and the background color white. Still, there aren't any changes as of yet.

Something is competing for the browser's attention here but I'm not sure what.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

And the same thing is happening when I start to code my resume into the website: http://www.englishteachertodd.com/efl-resume.html.

Which code is overriding my classes??