I want the contents of the list to be in a row not in a column . Whats the problem in my css code?-CodePudding

HTML code,I want the contents of the list that is Home, collection ,cart in a straight line not column wise

<body>
        <section >
            <div >
            <img src="_Logo.png" alt="">
            <a href="#" >AJ<span >Clothings</span></a>
            <nav>
                <ul >  
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Collection</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>
        </nav>
        </div>
    </body>

css starting from here , refer the last part ie .list a , what else to add so that contents of the list are on a line. Also I want the text to be on the right side

body {
  font-family: "Comforter", cursive;
  font-family: "Cormorant", serif;
  background-color: white;
}


/*************************For main heading******************************/
.Top-heading {
  background-color: rgb(0, 0, 0);
  height: 80px;
  background-size: cover;
}
.heading {
  display: flex;
  align-items: center;
}
.heading img {
  display: block;
  position: relative;
  object-fit: fill;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 0px;
}
.AJ {
  text-decoration: none;
  z-index: 2;
  color: rgb(255, 255, 255);
  padding-left: 10px;
  font-size: 30px;
}
.Tutorials {
  z-index: 2;
  color: red;
}
.list a {
  color: rgb(255, 13, 13);
  list-style: none;
  text-decoration: none;
  display: flex;
  width: 100%;
  text-align: center;
  margin-right: 1000px;
}

CodePudding user response：

This code works

body {
  font-family: "Comforter", cursive;
  font-family: "Cormorant", serif;
  background-color: white;
}
.Top-heading {
  background-color: rgb(0, 0, 0);
  height: 80px;
  background-size: cover;
}
.heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
    display: flex;
    align-items: center;
}
.heading img {
  display: block;
  position: relative;
  object-fit: fill;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 0px;
}
.AJ {
  text-decoration: none;
  z-index: 2;
  color: rgb(255, 255, 255);
  padding-left: 10px;
  font-size: 30px;
}
.Tutorials {
  z-index: 2;
  color: red;
}
nav {
    width: 40%;
    margin-left: 54rem;
}
.list a {
  color: rgb(255, 13, 13);
  list-style: none;
  text-decoration: none;
  text-align: center;
}
.list {
    display: flex;
    width: 40%;
    justify-content: space-between;
}
.list li {
    padding-left: 1rem;
}

<body> 
        <section >
            <div >
                <div >
                    <img src="_Logo.png" alt="LOGO">
                    <a href="#" >AJ<span >Clothings</span></a>
                </div>
                <nav>
                    <ul >  
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Collection</a></li>
                        <li><a href="#">Cart</a></li>
                    </ul>
                </nav>
            </div>
        </section>
    </body>