HTML/CSS Nav position

Question

I am having trouble formatting the position of my Nav. I just finished up a basic web-development course and am messing around on my own now (the code is NOT perfect).

I'm sort of trying to format the home page after another site, learning different ways of doing stuff, but I'm having trouble with my Nav1/Nav2 sections. I can't get them to have 0 spacing between the left edge of the page. I formatted everything with a min/max width so to expands nicely when I change the width of the page, but can't for the life of me get it to butt up to the left of the page.

Any help would be great.

Not sure how much to post on here but I'll put most everything I guess.

Here is the site: My Test Page

Index Page:

<?php
include ('top.php');
?>
<main>
    <article class="indexIMGArea">
        <figure>
            <img class="indexIMG" alt="Site Logo" src="pictures/index-e-sports-betting.jpg">
        </figure>
        <h2>FIRST TIME USER?</h2>
        <Table>
            <tr>
                <th>LIVE GAMES</th>
                <th>MATCH DETAILS</th>
                <th>CHAMPION ANALYTICS</th>
            </tr>
            <tr>
                <td>Check out stats for your games</td>
                <td>Find out the best builds</td>
                <td>Add depth to your knowledge</td>
            </tr>
            <tr>
                <td><a href="index.php"><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></a></td>
            </tr>
        </Table>
    </article>
</main>
<?php
include ('footer.php');
?>
</body>
</html>

CSS:

html {
    background-color: #1f8ecd;
}

body{
    padding: 0px;
    margin: 0px;
}
/* ========================= Start of Index ==================================*/
.indexIMGArea{
    position: relative;
    width: 1080px;
    margin: 0 auto;
    padding: 10px;
}

.indexIMG{
    display: block;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.siteLogo{
    max-height: 25px;
}

#index table{
    width: 900px;
    height: 300px;
    margin: auto;
    background-color: whitesmoke;
    text-align: center;
}
/* ========================= End of Index ====================================*/
/* ========================= Start of Nav ====================================*/
.nav1{
    margin: auto;
    max-width: 1300px;
    min-width: 1080px;
    margin-bottom: -25px;
    font-size: 1.5em;
    padding: 0px;
}

.nav2{
    background-color: #1d2e51;
    text-align: left;
    width: 100%;
    font-size: 1.5em;
    height: 40px;
    margin-bottom:10px;
    padding: 0px;
}

nav ol li{
    display: inline-block;
    list-style-type: none;
    padding: 5px;
    text-align: left;
    width: max-content;
}

.navContainer1, .navContainer2{
    margin:auto;
    min-width: 1080px;
    max-width: 1300px;
}

nav a:link, nav a:visited{
    text-decoration: none;
    padding: 5px;
}

.navTop a:link, .navTopRight a:link, .navTop a:visited, .navTopRight a:visited{
    color: whitesmoke;
}

.navBot :link, .navBot a:visited{
    color: #1f8ecd;
}

.navBot li:hover{
    color:whitesmoke;
    border-bottom: 3px solid whitesmoke;
}

.activePage{
    border-bottom: 3px solid whitesmoke;
}

.navTop{
    float: left;
}

.navTopRight{
    float: right;
}

.navContainer1::after{
    content: "";
    clear:both;
    display:table;

}

/* ========================= End of Nav ======================================*/
/* ========================  Start of  Footer ================================*/
footer{
    font-size: 0.8em;
    padding: 2em;
    text-align: end;
}
/* ========================  End of Footer  ==================================*/

Nav1:

<nav class="nav1">
    <div class="navContainer1">
        <ol class="navTop">
            <li><a href="index.php"><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></a></li>
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php">Home</a></li>
        </ol>

        <ol class="navTopRight">
            <li><a href="index.php"><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></a></li>
        </ol>
    </div>
</nav>

Nav2:

<nav class="nav2">
    <div class="navContainer2">
        <ol class="navBot">
            <?php
            print '<li class="';
            if ($path_parts['filename'] == "index") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';

            print '<li class="';
            if ($path_parts['filename'] == "home") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';

            print '<li class="';
            if ($path_parts['filename'] == "home") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';

            print '<li class="';
            if ($path_parts['filename'] == "home") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';
            ?>
        </ol>
    </div>
</nav>

Top:

<?php
$phpSelf = htmlentities($_SERVER['PHP_SELF'], ENT_QUOTES, "UTF-8");

$path_parts = pathinfo($phpSelf);
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test eSports Site</title>

        <meta charset="utf-8">
        <meta name="description" content="Test page for a potential eSports site">
        <meta name="keywords" content="eSports">
        <meta name="author" content="John DeMarche">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="../appleBottomedJeans/css/custom.css" type="text/css" media="screen">

        <?php
        $debug = false;

        $domain = '//';

        $server = htmlentities($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8');

        $domain .= $server;

        if ($debug) {
            print '<p>php Self: ' . $phpSelf;
            print '<pdomain: ' . $domain;
            print '<p>Path Parts<pre>';
            print_r($path_parts);
            print '</pre></p>';
        }
        ?>

    </head>

    <?php
    print '<body id="' . $path_parts['filename'] . '">' . PHP_EOL;

    include ('nav1.php');
    print PHP_EOL;

    include ('nav2.php');
    print PHP_EOL;

    if ($debug) {
        print '<p>DEBUG MODE IS ON</p>';
    }

    print "<!-- End of top.php -->";
    ?>

Answer 1

By css tried me text-align: right

Or tar

dir = "rtl"

Pal css

Just force her

So

text-align: right! important;

! important This forces the application of the style

Answer 2

I am not 100% sure I understand your problem. But, If I do, you want your Nav to be as close as possible to the left edge of the window. So, what you currently have is this :

You have a space (in green in the picture) cause by the ol which usually let a place to the numeration (1. 2. 3. 4. ...). To remove the place, you simply have to add a paddling-left: 0 to your ol.navTop in css. You can do the same with your ol.NavBot which will result with this :

I hope it helped you!