Menu bar in my website refuses to align horizontally

Question

I'm trying to have my menu be aligned horizontally but it refuses to move, I'm at a loss as to how to fix it. The menu is labelled nav ul in the CSS and its within the header tag in I've tried different floats hell the code is copied and pasted from other parts of the media query but specifically in the tablet and laptop versions the menu with the home button and the other stuff will align vertically.

I don't know what I'm doing wrong.

css starts here:-

    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Calibri, Arial, sans-serif;
}
#gridContainer {
    display: grid;
    grid-template-rows: [header] auto [sidebar] auto [main] auto [footer] auto;
    grid-template-columns: [header] auto [sidebar] auto [main] auto [footer] auto;
}
nav ul {
    list-style-type: none;
    text-align: left;
}

body{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "header" "sidebar" "main" "footer";
}

h1{
    font-size: 3em;
    padding-left: 10px;
}

header {
    grid-area: header;
    background-color: #222222;
    color: #fff;
    font-size: 1.2em;
}

#sidebar {
    grid-area: sidebar;
    background-color: darkseagreen;
}

main {
    grid-area: main;
    background-color: #DBD8D3;
}

footer {
    grid-area: footer;
    background-color: #222222;
}


/* Mobiles */
@media only screen and (max-width:600px){
    nav {
        display: table-cell;
        height: 20%;
        width: 20%;
        font-size: 1.1em;
    }

        nav ul {
            list-style-type: none;
            padding: 0;
            overflow: hidden;
        }

    li a {
        text-align: center;
        padding: 15px;
        float: left;
    }

    nav a a:hover, a:link, a:visited {
        color: #fff;
        text-decoration: none;
        font-size: inherit;
    }

    nav a:hover {
        color: #fff;
        text-decoration: underline;
        font-size: 1.2em;
        background-color: #666666;
    }
}

/* Tablets */
@media only screen and (min-width: 600px) and (max-width: 991px){

    nav {
        display: table-cell;
        height: 20%;
        width: 20%;
        font-size: 1.1em;
    }

        nav ul {
            list-style-type: none;
            padding: 0;
            overflow: hidden;
        }

    li a {
        text-align: center;
        padding: 15px;
        float: left;
    }

    nav a a:hover, a:link, a:visited {
        color: #fff;
        text-decoration: none;
        font-size: inherit;
    }

    nav a:hover {
        color: #fff;
        text-decoration: underline;
        font-size: 1.2em;
        background-color: #666666;
    }
}
h1 {
    margin-bottom: 0;
}


/* Large Screens*/
@media only screen and (min-width: 992px) {
    body {
        display: grid;
        grid-template-columns: 17.5% 82.5%;
        grid-template-rows: 15% auto 5%;
        grid-template-areas: "header header" "sidebar main" "footer footer";
        margin: 0;
        padding: 0;
    }

    header nav{
        float: right;
    }
    nav {
        float: right;
        display: table-cell;
        width: auto;
        font-size: 1.1em;
        flex:row;
    }

        nav ul {
            list-style-type: none;
            padding: 0;
            overflow: hidden;
            margin: 0;
        }
    li a {
        text-align: center;
        padding: 15px;
        float: left;
    }

    nav a a:hover, a:link, a:visited {
        color: #fff;
        text-decoration: none;
        font-size: inherit;
    }

    nav a:hover {
        color: #fff;
        text-decoration: underline;
        font-size: 1.2em;
        background-color: #666666;
    }

    #sidebar {
        background-color: darkseagreen;
        padding: 2%;
    }

        #sidebar img {
            height: 15%;
            width: 100%;
        }

    img{
        float: left;
    }

    main {
        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "title" "event1" "event2" "event3";
        grid-gap: 10px;
    }
    #title{
        grid-area: title;
        padding-left: 1%;
    }

    #event1{
        grid-area: event1;
        border: 3px solid #000;
    }

    #event1 img{
        padding-right: 1%;
    }

    #event2 {
        grid-area: event2;
        border: 3px solid #000;
    }

    #event2 img {
        padding-right: 1%;
    }

    #event3 {
        grid-area: event3;
        border: 3px solid #000;
    }

    #event3 img {
        padding-right: 1%;
    }
}
h1{ 

    margin-bottom: 0;
}```

**HTML starts here**

```<!DOCTYPE html>

<html>

<head>
    <link href="Website_project_Rodrigo_Zapata.css" rel="stylesheet" type="text/CSS">
    <title> North East Events</title>
</head>

<body>


    <header>
        <h1>North East Events</h1>
        <nav>
            <ul>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Home</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">View Events</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Admin</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Credits</a></li>
                <li><a href="file:///U:/HTML5%20stuff/project%20folder/Website_project_Rodrigo_Zapata.html">Wireframe</a></li>
            </ul>
        </nav>
    </header>
    <section id="sidebar">
        <h3> <strong> Upcoming </strong></h3>
        <p>Lorem Ipsum</p>
    </section>
    <main>
        <h2 id="title"> <strong> Live Today </strong></h2>
        <section id="event1">
            <img id="image1" src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
            <h3>event 1</h3>
            <p>
                <strong>According:</strong> sample text
            </p>
        </section>

        <section id="event2">
            <img id="image2" src="image2.jpg" alt="cascades" width="500" height="333">
            <h3>event 2</h3>
            <p>
                sample text
            </p>
        </section>

        <section id="event3">
            <img id="image3" src="image3.jpg" alt="temple" width="500" height="333">
            <h3>event 3</h3>
            <p>
               lorem ipsum
            </p>
        </section>

    </main>
    <footer></footer>

</body>

</html>```

Answer 1

Remove all float attributes and add the following to nav ul

display: flex;
flex-direction: row;

You'll need to increase your grid-template-rows % to see it on a larger screen.

Id recommend giving https://css-tricks.com/snippets/css/a-guide-to-flexbox/ a read to help understand flexbox.