aligning the bottom bar elements

Question

Hi I am trying to align the bottombar elements so that they are in 2 columns on the side of 102. I was wondering if there is a way to fix it as they are all floating on the right at the moment. I am a beginner html css programmer and I am not very experienced yet. Ill appreciate any help you can give me!

CSS

/*bottom navbar*/
.bottomnav{
  width: 100%;
  background-color: rgb(248, 138, 180);
  display: flex;
  flex-direction: row;
}

.navbarlogo2{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
  text-decoration: none;
}

/*bottombar*/
.nav {
    display: flex;
    flex-direction: row;
  }

  .left, .right {
    flex: 1;
  }

HTML

<div class="bottomnav">
            <ul class="bottomlogo">
                <li class="navbarimg2"><img class="navbarlogo2" src="img/LOGO.png"></li>
            </ul>

            <div class='nav'>
                <div class='left'>
                  <ul>
                    <li>About Us</li>
                    <li>Affiliates</li>
                  </ul>
                </div>
                <div class='right'>
                  <ul>
                    <li>TOS</li>
                  </ul>
                </div>
              </div>
        </div>

END RESULT

WANTED RESULT

Answer 1

I made things like that. CSS Grid is one of the new HTML5 standard you should take a look. In your case, use a grid is better choice against flex because you're looking for a table-like structure.

I choosed to split your needs in 2 parts:

1. Center your logo
2. Make a 2 columns grid for your links

Centering your logo

We need to center an element and prevent it to interfere with our incoming links grid. So we'll set our container with a position: relative and place the img tag in position: absolute. Note the image's top right bottom left properties are now relative to the first parent positioned as relative.

And so we only need to make some simple maths. Note the calc() function, we don't want to center the top left corner of your logo but the center. So we need to remove the half of the defined logo's width.

navbarlogo2 {
  left: calc(50% - 60px);
}

Make a 2 columns grid for your links

In order make a grid, you have to display your container as grid and set its grid-template-columns to 1fr 1fr. You can translate fr with the word fraction. So here, we're asking for a row split in 2 fractions. Because we want a place for our logo, we're adding a gap (grid-cap) in out container to make some space between our 2 columns. Learn more about the fr unit here.

body {
  margin:0
}

.bottomnav {
  width: 100%;
  background-color: rgb(248, 138, 180);
  position: relative;
}

.navbarlogo2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  text-decoration: none;
  position: absolute;
  filter: brightness(10);
  top: 15px;
  left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}

/*bottombar*/
.nav {
  display: grid;
  grid-gap: 120px;
  grid-template-columns: 1fr 1fr;
}
.nav ul {
  padding-left: 0;
}
.nav ul li {
  list-style: none;
  text-align: center;
  padding-left: 0;
}

.left,
.right {
  flex: 1;
}

<div class="bottomnav">
  <div class="bottomlogo">
    <img class="navbarlogo2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg">
  </div>

  <div class='nav'>
    <div class='left'>
      <ul>
        <li>About Us</li>
        <li>Affiliates</li>
      </ul>
    </div>
    <div class='right'>
      <ul>
        <li>TOS</li>
        <li>Fourth </li>
      </ul>
    </div>
  </div>
</div>