How to make div elements of a parent div horizontal-CodePudding

This may be very naive but I am struggling to make the div children of a parent div element horizontal

I am trying to make a header, here is my code

.logoImg {
  width: 50px;
  height: 50px;
}

.header {
  display: flex;
  justify-content: center;
  float: left;
}

.logo {
  margin: 0 auto;
  display: flex;
}

.addressDropDown {
  margin: 0 auto;
  display: flex;
}

<header>
  <div className="logo">
    <img className="logoImg" src='https://via.placeholder.com/100x100' alt="" />
  </div>
  <div className="addressDropDown">
    <p>Dropdown</p>
  </div>
  <div className="searchBar">
    <input type="text" placeholder="What are you looking for?" />
  </div>
  <div className="languageSetting">
    <p>language</p>
  </div>
  <div className="singInBtn">
    <p>signIn</p>
  </div>
  <div className="cartBtn">
    <p>Cart</p>
  </div>
</header>

<body>
  Body of the page
</body>

I would really appreciate it if someone can point out my mistake or give me some hints

Thank you

CodePudding user response：

Your mistake is, that you try to change the style of .header. However to access the <header> element you have to remove the dot:

header {
   ...
}

CodePudding user response：

Just a small typo in your CSS code. The selector should be header (this selects all header elements) and not .header (this selects all element with the class "header")

CodePudding user response：

you just need to remove . from header because you donot give a class use this I hope this will help you:

.logoImg {
  width: 50px;
  height: 50px;
}

header {
  display: flex;
  justify-content: center;
  float: left;
}

.logo {
  margin: 0 auto;
  display: flex;
}

.addressDropDown {
  margin: 0 auto;
  display: flex;
}