How do I fix the position of my flex box images?-CodePudding

Im having issues with aligning my 6 images in 2 rows of 3. - 1, 2, 3 4, 5, 6 At the moment they are in 3 rows. The first 2 images are in the centre of the page, while the others are all on the 3rd line. Not sure if its an issue with the div tags or the css. Im using flexbox at the moment but I know theres also grid layout

Please can you advise? Thanks very much

* {
  margin: 0
}

a:link {
  text-decoration: none;
  color: black;
}

nav {
  background-color: pink;
  text-align: right;
  width: 100%;
  height: 160%;
  height: 300px;
}

li {
  list-style: none;
  display: inline-block;
  padding: 90px;
  font-family: cursive;
  text-decoration: none;
  position: relative;
  color: white;
}

li a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly
}

.rounded {
  border-radius: 20%;
}

button {
  border-radius: 20%;
  margin: 10px;
  width: 90px;
  height: 50px;
  border-style: none;
  background-color: white;
}

<!DOCTYPE html>
<html>

<body>

  <head>

  </head>
  <header>


    <nav>
      <button><a href="/Volumes/Untitled/coding/Cart.html" >Go to 
    Cart</a></button>

      <button><a href="/Volumes/Untitled/codingShop.html" >Shop</a></button>
      <ul>
        <img src="images/Logo2.jpeg" alt="my logo"  width="160px" />

        <li><a href="index.html">HOME</a></li>
        <li><a href="shop.html">SHOP</a></li>
        <li><a href="blog.html">BLOG</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="contactus.html">CONTACT US</a></li>
      </ul>

    </nav>
  </header>
  <h3>
    Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
  </h3>

  <div >
    <div >
      <img src="images/Fred.jpeg" alt="accessories"  width="280px">
    </div>
    <div >
      <div >
        <img src="images/BlackonBlack.jpg" alt="photography"  width="500px">
      </div>
      <div >
        <div >
          <img src="images/Boy.jpeg" alt="fashion"  width="300px">
        </div>
        <div >
          <div >
            <img src="images/Campbell.jpeg" alt="footwear"  width="400px">
          </div>

          <div >
            <div >
              <img src="images/Scandal.jpeg" alt="jewellery"  width="300px">
            </div>
            <div >
              <div >
                <img src="images/bowie-big.jpeg" alt="art"  width="300px">
              </div>


            </div>

CodePudding user response：

You forgot to close your a inside your button. Also, as mentioned in the comments you cannot have an img as a direct child to a ul that is not nested in a li. So I nested it in a li and removed the default padding-inline-start to keep the same structure. Then I went down to your rows and simplified it so it is two rows of 3 as requested. Please see how I simplified the rows below:

* {
  margin: 0
}

a:link {
  text-decoration: none;
  color: black;
}

nav {
  background-color: pink;
  text-align: right;
  width: 100%;
  height: 160%;
  height: 300px;
}

li {
  list-style: none;
  display: inline-block;
  padding: 90px;
  font-family: cursive;
  text-decoration: none;
  position: relative;
  color: white;
}

li a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly
}

.rounded {
  border-radius: 20%;
}

button {
  border-radius: 20%;
  margin: 10px;
  width: 90px;
  height: 50px;
  border-style: none;
  background-color: white;
}

<header>
  <nav>
    <button><a href="/Volumes/Untitled/coding/Cart.html" >Go to Cart</a></button>
    <button><a href="/Volumes/Untitled/codingShop.html" >Shop</a></button>
    <ul>
      <li style="padding: 0;">
        <a href="/"><img src="logo.png" alt="my logo"  width="160px"></a>
      </li>
      <li><a href="index.html">HOME</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="blog.html">BLOG</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contactus.html">CONTACT US</a></li>
    </ul>
  </nav>
</header>
<h3>
  Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
</h3>

<div >
  <img src="https://dummyimage.com/100/000/fff" alt="accessories"  width="280px">
  <img src="https://dummyimage.com/100/000/fff" alt="photography"  width="500px">
  <img src="https://dummyimage.com/100/000/fff" alt="fashion"  width="300px">
</div>
<div >
  <img src="https://dummyimage.com/100/000/fff" alt="footwear"  width="300px">
  <img src="https://dummyimage.com/100/000/fff" alt="jewellery"  width="300px">
  <img src="https://dummyimage.com/100/000/fff" alt="art"  width="300px">
</div>