I can't figure out how to put the logo and the navigation links on the same line-CodePudding

https://codepen.io/zaidzac95/pen/qBKWKep

        <nav >
            <ul>    
            <li><ahref="">Home</a</li>
            <li><ahref="">AboutUs</a</li>
                <li><a href="">Products</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </nav>
    <img src="ethereum-eth-logo.png" > `

CodePudding user response：

You need to add the image like this(inside the nav tags):

<nav >
   <a  href="#">
    <img src="image.jpg" alt="Logo" style="width:40px;">
  </a>
  ...
</nav>

CodePudding user response：

Use display:inline-block on your .sub-header. If your image is still not aligned, it's because of the padding you set. consider removing it or use other units of measure.

.sub-header {
  display: inline-block;
  /* padding-left: 450px; */
}

li {
  display: inline-block;
}

<nav >
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">AboutUs</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact Us</a></li>
  </ul>
</nav>
<img src="https://via.placeholder.com/50x50" >

CodePudding user response：

you have many typos in your code, and you should fix your HTML structure because it's very important. here is a rework for your code. you can check how things work in this code and then read more about them. good luck

* {
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    text-decoration: none;
}

.header {
    width: 100vw;
    height: 200px;
    background: lightslategray;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.logo-container {
    background: lightcoral;
    width: 20%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.logo {
    height: 100px;
}

.nav-container {
    background: lightblue;
    width: 80%;
    height: 100px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.nav-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.nav-list :nth-child(n) {
    /* nav children */
    color: black;
    padding: 10px;
}

.nav-list :nth-child(n):hover {
    /* nav children */
    color: white;
    background: lightslategray;
}

 <div >
      <div >

        <div >
          <img  src="ethereum-eth-logo.png">
        </div>
    
        <nav >
          <ul >
            <li><a href="">Home</a</li>
            <li><a href="">AboutUs</a</li>
            <li><a href="">Products</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact Us</a></li>
          </ul>
        </nav>

CodePudding user response：

First clean-up your HTML!

HTML :

        <nav >
          <img src="../avatar_114.jpg" alt="ACME logo" >
            <ul>    
                <li><a href="#">Home</a></li>
                <li><a href="#">AboutUs</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </nav>

If You're not sure about the syntax, check it on https://validator.w3.org/nu/#textarea