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

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.