Hi everyone, I really need some assistance with my code. The flex-direction property is not working for me no matter what I try. I've tested it on both Chrome and Microsoft Edge, but it displays the same result. I've been stuck on this for the past two days. Currently, I'm following a tutorial on creating responsive web design on YouTube. Interestingly, when I copy the source code directly from the tutorial, it works perfectly fine. However, when I code along while watching the tutorial, the flex-direction property doesn't work at all. Here's my HTML code:
https://i.sstatic.net/u0LwJ.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blogger</title>
<!--
-FontAwesome Icons-->
<link rel="stylesheet" href="css/all.css">
<!--Custom Style-->
<link rel="stylesheet" href="css/Style.css">
</head>
<body>
<!---------------------Navigation------------------------>
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
<a href="#" class="text-gray">
Blooger
</a>
<div>
<div class="toggle-collapse">
<div class="toggle-icons">
<i class="fas-fa-bars"></i>
</div>
</div>
<ul class="nav-items">
<li class="nav-link">
<a href="#">Home</a>
</li>
<li class="nav-link">
<a href="#">Category</a>
</li>
<li class="nav-link">
<a href="#">Archive</a>
</li>
<li class="nav-link">
<a href="#">Pages</a>
</li>
<li class="nav-link">
<a href="#">Contact-Us</a>
</li>
</ul>
</div>
<div class="social text-gray">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<!-------x--------------Navigation----------x----------->
<!--Custom javaScript-->
<script ></script>
</body>
</html>
css codes
@import url('../css/fonts.css');
html, body{
margin:0%;
box-sizing: border-box;
overflow-x: hidden;
}
/*Theme Colors*/
:root{
--text-gray:#3f4954;
--text-light:#686666da;
--bg-color:#0f0f0f;
--white:#ffffff;
--midnight:#104f55;
/* Linear Gradient Colors*/
--sky:linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
:root{
/* Theme Font Family */
--Abel:'Abel', cursive;
--Anton:'Anton', cursive;
--Josefin:'Josefin', cursive;
--Lexend:'Lexend', cursive;
--Livvic:'Livvic', cursive;
}
/*----------------Global Classes---------------*/
a{
text-decoration: none;
color: var(--text-gray);
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
/*-------x---------Global Classes--------x-------*/
/*---------------navbar-----------------------------*/
.nav{
background: white;
padding: 0.2rem;
height: 0rem;
min-height:10vh;
overflow:hidden;
}
.nav.nav-menu{
justify-content:space-between;
}
.nav.nav-menu>div:last-child{
margin:auto;
}
.nav.nav-menu::before,
.nav.nav-menu::after {
content: '';
}
.nav .nav-items{
display: flex;
margin:0;
}
.nav .nav-items .nav-link{
padding: 1.6rem 1rem ;
font-size: 1.1rem;
position: relative;
font-family: var(--Abel);
font-size: 1.6rem;
}
.nav .nav-items .nav-link:hover{
background-color: var(--midnight);
}
.nav .nav-items .nav-link:hover a{
color: var(--white);
}
.nav.nav-brand a{
font-size: 1.6rem;
padding: 1rem 0;
display: block;
font-family:var(--Lexend);
font-size: 1.1rem;
}
.nav .social{
padding: 1.4rem 0;
}
.nav .social i{
padding: 0.2rem;
}
.nav .social i:hover{
color: #a1c4cf;
}
/*---x------------navbar---------x--------*/
/*----------------view-port less than or equal to 750px------------------*/
@media only screen and(max-width:750px){
.nav .nav-menu, .nav .nav-items{
flex-direction:column;
}
}
/*------x----------view-port less than or equal to 750px------x------------*/