Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Introduction to HTML and CSS Make It Beautiful With CSS Select and Style by Class

Posted by Gasser Elshafei
Gasser Elshafei
489 Points

how can i space word apart from another

if i want to change the space betwwen home and contacts at the top of my website what do i do???

Gasser Elshafei
Gasser Elshafei
489 Points

thanks for your advice sir

Gasser Elshafei
Gasser Elshafei
489 Points

and yes can you help me please i am new so i am confused

Lucas DeVinney
Lucas DeVinney
1,489 Points

Yes, would you like to talk through comments here or somewhere else?

Gasser Elshafei
Gasser Elshafei
489 Points

oh do you have zoom sir

Lucas DeVinney
Lucas DeVinney
1,489 Points

yes i do. I can call on wednesday in the afternoon est

1 Answer

Lucas DeVinney
Lucas DeVinney
1,489 Points

If you are trying to change the layout of your header, this should be done using css. Here is an example of a navigation bar in the header of the website:

<nav class="navigation">
          <ul>
            <li><a href="#"><strong>Home</strong></a></li>
            <li><a href="#"><strong>Music</strong></a></li>
            <li><a href="#"><strong>About</strong></a></li>
            <li><a href="#"><strong>Contact</strong></a></li>
          </ul>
        </nav>

.navigation {
    text-align: right;
    padding-bottom: 0px;
    padding-top: 0px;
    font-size: 120%;
    margin-right: 1.5%;
}

.navigation ul li {
  border-radius: 10px;
  display: inline-block;
  background-color: 556673;
  padding: 5px 10px;
  margin: 2px;
}

.navigation ul li a {
    text-decoration: none;
    color: white;
}

.navigation ul li a:hover {
    text-decoration: none;
    color: 2D373E;
}

The style that targets the navigation class aligns the text to the right and changes the font size and positioning in the header. The navigation style that affects the unordered list (.navigation ul li) is changing how each link looks. The border-radius is causing each link to have a background with rounded corners. The display attribute is changing how the list is organized (in this case from left to right instead of top to bottom). The padding and margin values is what changes the space between the links and their borders, and the gaps between each link respectively.

If you would like to test the source code of this header and test out values, let me know.