Everything stays together. Im trying to get the search bar and the logo next to each other on the le-CodePudding

Im trying to get the logo and search bar close together on the left side and extend the search bar to the right more. I dont know what else to do. Also I need to make a join and log in button to the right of everything. I also cant seem to get the submit button on the right side of the search field. Basically needs to look like this

@import url('https://fonts.googleapis.com/css?family=Poppins');
body {
  font-family: 'Poppins';
}

header>div {
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightgray;
}

nav {
  width: 600px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.blackHeart {
  width: 20px;
  margin-right: 1rem;
}

.searchmenu {
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 50px;
  margin-left: .3rem;
  display: right;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px;
  background: red;
  font-size: 17px;
  border: none;
  cursor: pointer;
  color: white;
}

.topnav .search-container button:hover {
  background: black;
}

.search {
  background-color: rgba(211, 211, 211, 0.463);
  float: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<header>
  <div>
    <div>
      <img  src="images/black-heart.png" alt="black heart" />
      <span> Nifty Penguin Magic </span>
    </div>
    <nav>
      <ul>
        <li><a href="#"> npm Enterprise </a></li>
        <li><a href="#"> Products </a></li>
        <li><a href="#"> Solutions </a></li>
        <li><a href="#"> Resources </a></li>
        <li><a href="#"> Docs </a></li>
        <li><a href="#"> Support </a></li>
      </ul>
    </nav>
  </div>

  <div >
    <ul>
      <div>
        <img  src="images/npm-logo.png" alt="npm logo">
      </div>
      <div >
        <div >
          <form>
            <input type="text" placeholder="Search.." name="search" >
            <button type="submit">Submit</button>
          </form>
        </div>
      </div>
      <div>
        <a href="#">Join Log In</a>
      </div>
    </ul>
  </div>
</header>

<body>

</body>

</html>

CodePudding user response：

Is this work? I cancelled all float: right from your code and replaced with flexbox

@import url('https://fonts.googleapis.com/css?family=Poppins');
body {
  font-family: 'Poppins';
}

header>div {
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightgray;
}

nav {
  width: 600px;
}

form {
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.blackHeart {
  width: 20px;
  margin-right: 1rem;
}

.searchmenu {
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 50px;
  margin-left: .3rem;
  display: right;
}

.topnav, .searchContainer {
  width: 100%;
}

.topnav input[type=text] {
  padding: 6px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  width: 18%;
  padding: 6px;
  background: red;
  font-size: 17px;
  border: none;
  cursor: pointer;
  color: white;
}

.topnav .search-container button:hover {
  background: black;
}

.search {
  background-color: rgba(211, 211, 211, 0.463);
  width: 100%;
  border: none;
  outline: none;
}

.searchmenu ul {
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.searchDiv {
  width: 78%;
  display: flex;
  align-items: center;
  border: 1px solid black;
  background-color: rgba(211, 211, 211, 0.463);
}

.icon {
  width: 20px;
  height: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<header>
  <div>
    <div>
      <img  src="images/black-heart.png" alt="black heart" />
      <span> Nifty Penguin Magic </span>
    </div>
    <nav>
      <ul>
        <li><a href="#"> npm Enterprise </a></li>
        <li><a href="#"> Products </a></li>
        <li><a href="#"> Solutions </a></li>
        <li><a href="#"> Resources </a></li>
        <li><a href="#"> Docs </a></li>
        <li><a href="#"> Support </a></li>
      </ul>
    </nav>
  </div>

  <div >
    <ul>
      <div>
        <img  src="images/npm-logo.png" alt="npm logo">
      </div>
      <div >
        <div >
          <form>
             <div >
              <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
                <g>
                <path d="m495,466.1l-119.2-119.2c29.1-35.5 46.5-80.8 46.5-130.3 0-113.5-92.1-205.6-205.6-205.6-113.6,0-205.7,92.1-205.7,205.7s92.1,205.7 205.7,205.7c49.4,0 94.8-17.4 130.3-46.5l119.1,119.1c8,8 20.9,8 28.9,0 8-8 8-20.9 0-28.9zm-443.2-249.4c-1.42109e-14-91 73.8-164.8 164.8-164.8 91,0 164.8,73.8 164.8,164.8s-73.8,164.8-164.8,164.8c-91,0-164.8-73.8-164.8-164.8z"/>
              </g>
              </svg>
 
            <input type="text" placeholder="Search.." name="search" >
            
             </div>
            <button type="submit">Submit</button>
          </form>
        </div>
      </div>
      <div>
        <a href="#">Join Log In</a>
      </div>
    </ul>
  </div>
</header>

<body>

</body>

</html>

CodePudding user response：

The problem is you are going with floats also i have made sime changes to your overall html and css you can compare with your code.

@import url("https://fonts.googleapis.com/css?family=Poppins");
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        font-family: "Poppins";
      }

      header > .firstnav {
        padding: 12.5px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid lightgray;
      }

      nav {
        width: 600px;
      }

      nav ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

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

      .blackHeart {
        width: 20px;
        margin-right: 1rem;
      }

      .searchmenu {
        padding: 12.5px 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .logo {
        width: 50px;
        margin-left: 0.3rem;
      }
      .searchmenu form {
        position: relative;
      }
      .searchmenu form svg {
        width: 33px;
        background: beige;
        padding: 7px;
        position: absolute;
        color: black;
        height: 34px;
        top: -1px;
        left: 29px;
      }

      .searchmenu input[type="text"] {
        padding: 6px 35px;
        font-size: 17px;
        border: none;
        background-color: rgba(211, 211, 211, 0.463);
        margin-left: 30px;
        width: 1050px;
      }

      .searchmenu button {
        padding: 6px;
        background: red;
        font-size: 17px;
        border: none;
        cursor: pointer;
        color: white;
      }

      .searchmenu ul li {
        list-style: none;
        padding: 5px 0;
      }
      .searchmenu ul li a {
        text-decoration: none;
        padding: 0 15px;
      }
      .searchmenu ul {
        display: flex;
      }
      .join {
        border: 1px solid grey;
      }

and your HTML

<header>
      <div >
        <div>
          <img
            
            src="images/black-heart.png"
            alt="black heart"
          />
          <span> Nifty Penguin Magic </span>
        </div>
        <nav>
          <ul>
            <li><a href="#"> npm Enterprise </a></li>
            <li><a href="#"> Products </a></li>
            <li><a href="#"> Solutions </a></li>
            <li><a href="#"> Resources </a></li>
            <li><a href="#"> Docs </a></li>
            <li><a href="#"> Support </a></li>
          </ul>
        </nav>
      </div>

      <div >
        <div>
          <img  src="images/npm-logo.png" alt="npm logo" />
        </div>
        <!-- <div > -->
        <!-- <div > -->
        <form>
          <svg
            
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            enable-background="new 0 0 512 512"
          >
            <g>
              <path
                d="m495,466.1l-119.2-119.2c29.1-35.5 46.5-80.8 46.5-130.3 0-113.5-92.1-205.6-205.6-205.6-113.6,0-205.7,92.1-205.7,205.7s92.1,205.7 205.7,205.7c49.4,0 94.8-17.4 130.3-46.5l119.1,119.1c8,8 20.9,8 28.9,0 8-8 8-20.9 0-28.9zm-443.2-249.4c-1.42109e-14-91 73.8-164.8 164.8-164.8 91,0 164.8,73.8 164.8,164.8s-73.8,164.8-164.8,164.8c-91,0-164.8-73.8-164.8-164.8z"
              />
            </g>
          </svg>
          <input
            type="text"
            placeholder="Search.."
            name="search"
            
          />
          <button type="submit">Submit</button>
        </form>
        <!-- </div> -->
        <!-- </div> -->
        <ul>
          <li ><a href="#">Join</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </header>