0

As per the image in the link, I am trying to exactly center the hyperlinks that will be used as navigation. However the links are always appearing slightly off center to the left. Below is my code for reference.

I would appreciate any help with this. Thanks in advance.

The image shows how the hyperlinks are slightly off center

.title {
    background-color: #1a1a1a;
    border-top-style: solid;
    border-top-width: 10px;
    border-top-color: #1a1a1a;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #1a1a1a;
    text-align: center;
    color: #e6e6e6;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-top: 2px;
    padding-bottom: 6px;
}

.page-links-container {
    background-color: #1a1a1a;
    text-align: center;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #e6e6e6;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #e6e6e6;
}

.page-links-item {
    color: #e6e6e6;
    display:inline;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.title-image {
    height: 400px;
    width: 1450px;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.title-image-container {
    background-color: #1a1a1a;
    text-align: center;
}

.main {
    padding: 0px;
    margin: 0px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Tropical Rainforests | Home</title>
        <link href="assets/styles/styles.css" rel="stylesheet" type="text/css">
    </head>
    <body class="main">
        <h1 class="title">Tropical Rainforests Trust</h1>
        <nav class="page-links-container">
            <ul class="page-links-list">
                <li class="page-links-item">Home</li>
                <li class="page-links-item">History</li>
                <li class="page-links-item">Education</li>
                <li class="page-links-item">Community</li>
                <li class="page-links-item">About Rainforests</li>
                <li class="page-links-item">Visitor Information</li>
                <li class="page-links-item">Get involved</li>
                <li class="page-links-item">Adopt an animal</li>
            </ul>
        </nav>
        <div class="title-image-container">
            <img class="title-image" src="assets/images/rain-forest-home-page.jpg" alt="An image of path in a rain forest.">
        </div>
    </body>
</html>
Chris
  • 13
  • 4

0 Answers0