Custom Tinting & Truck Accessories - Making the project responsive

Hi!

In order to improve my CSS skills, I decided to find websites online and recreate them to the best of my abilities.

Currently, I need help making the current project I have responsive (like the actual website). I am focused only on the HTML and CSS portion.

To be specific, the responsiveness of my navbar is what is throwing me off. Reduce the actual website (link down below) to mobile-view and compare it to mine when in the same view. Their items are spaced out evenly and with sufficient spacing, but mine is not despite my addtions.

Please advise :slight_smile:

The website link is down below.

Here is what I have so far:

HTML

<nav class="nav">
    <div class="navbar">
        <li><a href="#">Home</a></li>
        <li><a href="#">Window Tinting</a></li>
        <li><a href="#">Truck Accessories</a></li>
        <li><a href="#">Windshield Repair</a></li>
        <li><a href="#">Auto Services</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Get A Price Quote</a></li>
    </div>
</nav>

CSS

.nav {

background-image: url(http://blog.customtinting.net/wp-content/themes/customtintgen/images/orange/nav.png);

padding: 25px;

font-family: 'Lato', impact;

font-weight: 400;

font-size: 1.3em;

}

.navbar {

display: flex;

background-image: url(http://blog.customtinting.net/wp-content/themes/customtintgen/images/orange/nav.png);

list-style-type: none;

justify-content: space-around;

margin: 0 auto;

flex-wrap: wrap;

width: 70%;

}

.navbar a {

text-decoration: none;

color: #fff;

padding: 10px;

}

/* Navbar */

@media (max-width: 1023px) {
    .nav {
        width: 100%;
        height: 100%;
    }
}
.nav {
    background-image: url(http://blog.customtinting.net/wp-content/themes/customtintgen/images/orange/nav.png);
    font-family: 'Lato', impact;
    font-weight: 400;
    font-size: 1.2em;
    text-align: center;
}

.navbar {
    display: flex;
    background-image: url(http://blog.customtinting.net/wp-content/themes/customtintgen/images/orange/nav.png);
    list-style-type: none;
    justify-content: center;
    margin: 0 auto;
    flex-wrap: wrap;
 
}

.navbar a {
    text-decoration: none;
    color: #fff;
    padding: 10px;
    margin: 10px;
    text-transform: uppercase;
    display: block;
}

I think I got it, if there is another way feel free to share