center navbar with an image next to the link?-CodePudding

I'm working a project for the oden project that has us recreating a form from Intuit Accounts, and I'm having a hard time trying to get that navbar with the links to those other company with the corresponding logo on the same line as the link. I've tried inspect element and copied the CSS for the website, but that doesn't work for me for some reason, so after that I've tried to recreating it with my own CSS, and I got the entire nav bar to line up. With each list element to line up, and each logo to line up with the corresponding link, but I can't get the navbar to center. How would I do that?

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

body {
  background: #D3D3D3;
  font-family: Arial, sans-serif;
}


/* header name */

.main-company-name {
  font-size: 1.4rem;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0;
}


/* navbar list of companies */

.list-of-other-companies-header {
  padding-bottom: 0.25rem;
  padding-top: 0;
  border-bottom-style: solid;
  border-bottom-width: 0;
  border-bottom-color: transparent;
}

.companies-list ul {
  height: 23px;
  width: 100%;
  margin: auto 0;
}

nav .companies-list,
ul,
li {
  display: inline;
  cursor: pointer;
  margin-right: 0.375rem;
}

nav .companies-list,
ul,
li,
h2 {
  display: inline;
  position: relative;
}

.company img {
  width: 18px;
}

.company a {
  text-decoration: none;
  color: gray;
  font-size: .8rem;
}

<!-- company name/logo header -->
<header>
  <div >
    <h1>Intuit</h1>
  </div>
</header>
<!-- navbar list of other compaines -->
<section>
  <div >
    <nav >
      <ul>
        <li >
          <a href="https://mint.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the mint company logo">
          </a>
          <a href="https://mint.intuit.com/" target="_blank">
            <h2>
              mint
            </h2>
          </a>
        </li>
        <li >
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the quickbooks company logo">
          </a>
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <h2>
              quickbooks
            </h2>
          </a>
        </li>
        <li >
          <a href="https://turbotax.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the turbotax company logo">
          </a>
          <a href="https://turbotax.intuit.com/" target="_blank">
            <h2>
              turbotax
            </h2>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

CodePudding user response：

Center text alignment on the list's parent element and remove the default padding on the list.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

body {
  background: #D3D3D3;
  font-family: Arial, sans-serif;
}


/* header name */

.main-company-name {
  font-size: 1.4rem;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0;
}


/* navbar list of companies */

.list-of-other-companies-header {
  padding-bottom: 0.25rem;
  padding-top: 0;
  border-bottom-style: solid;
  border-bottom-width: 0;
  border-bottom-color: transparent;
}

.companies-list {
  text-align: center;
}

.companies-list ul {
  height: 23px;
  width: 100%;
  margin: auto 0;
  padding-left: 0;  /* <-- HERE */
}

nav .companies-list,
ul,
li {
  display: inline;
  cursor: pointer;
  margin-right: 0.375rem;
}

nav .companies-list,
ul,
li,
h2 {
  display: inline;
  position: relative;
}

.company img {
  width: 18px;
}

.company a {
  text-decoration: none;
  color: gray;
  font-size: .8rem;
}

<!-- company name/logo header -->
<header>
  <div >
    <h1>Intuit</h1>
  </div>
</header>
<!-- navbar list of other compaines -->
<section>
  <div >
    <nav >
      <ul>
        <li >
          <a href="https://mint.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the mint company logo">
          </a>
          <a href="https://mint.intuit.com/" target="_blank">
            <h2>
              mint
            </h2>
          </a>
        </li>
        <li >
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the quickbooks company logo">
          </a>
          <a href="https://quickbooks.intuit.com/" target="_blank">
            <h2>
              quickbooks
            </h2>
          </a>
        </li>
        <li >
          <a href="https://turbotax.intuit.com/" target="_blank">
            <img src="https://via.placeholder.com/50" alt="image of the turbotax company logo">
          </a>
          <a href="https://turbotax.intuit.com/" target="_blank">
            <h2>
              turbotax
            </h2>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

CodePudding user response：

use flexbox and get rid of the old-school navbar (ul one).

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  background: #D3D3D3;
  font-family: Arial, sans-serif;
}


/* header name */

.main-company-name {
  font-size: 1.4rem;
  color: gray;
  text-align:center;
  padding: 1.25rem 0;
}

.navigation{
  display: flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
}

.comp{
  display: flex;
  flex-direction:row;
  align-items:center;
  margin-right: auto;
  margin-left: auto;
}
.comp a{
  margin-right: 6px;
}

<!-- company name/logo header -->
<h1 >Intuit</h1>
<!-- navbar list of other compaines -->
<nav >
  <div >
    <a href="https://mint.intuit.com/" target="_blank">
      <img src="images/mint.svg" alt="">
    </a> mint
  </div>
  <div >
    <a href="https://quickbooks.intuit.com/" target="_blank">
      <img src="images/quickbooks.svg" alt="">
    </a> quickbooks
  </div>
  <div >
    <a href="https://turbotax.intuit.com/" target="_blank">
      <img src="images/turbotax.svg" alt="">
    </a> turbotax
  </div>
</nav>