Items not getting aligned properly CSS-CodePudding

I am making a website using React and here I am using html and css. I have got a nav bar and a search bar but the problem is that the search bar is changing the alignment of the title in the nav bar, here is the codesandbox - https://codesandbox.io/s/aged-pine-0x9t60?file=/src/App.js

Please make sure to increase the result size so that you can see it properly. Here, I want the title to be in the center, the search bar to be at the left and the menu icons to the right. Currently, the search bar is at the left, the menu icons are on the right, but the title isn't in the center. Please help me fix this problem. Thank you, have a nice day.

CodePudding user response：

I had corrected your code by removing unneccesary margin/padding and adding flexx

App.js

import "./styles.css";

export default function App() {
  return (
    <nav >
      <form action="" >
        <input
          type="search"
          name="search"
          pattern=".*\S.*"
          
          required
        />
        <button  type="submit">
          <span>Search</span>
        </button>
      </form>
      <center>
        <a href="" >
          BEST FURNITURE
        </a>
      </center>

      <input  type="checkbox" id="menu-btn" />
      <label  for="menu-btn">
        <span ></span>
      </label>
      <ul >
        <li style={{marginRight:'5px'}}>
          <center>
            <svg  viewBox="0 0 20 20">
              <path
                fill="none"
                d="M17.671,13.945l0.003,0.002l1.708-7.687l-0.008-0.002c0.008-0.033,0.021-0.065,0.021-0.102c0-0.236-0.191-0.428-0.427-0.428H5.276L4.67,3.472L4.665,3.473c-0.053-0.175-0.21-0.306-0.403-0.306H1.032c-0.236,0-0.427,0.191-0.427,0.427c0,0.236,0.191,0.428,0.427,0.428h2.902l2.667,9.945l0,0c0.037,0.119,0.125,0.217,0.239,0.268c-0.16,0.26-0.257,0.562-0.257,0.891c0,0.943,0.765,1.707,1.708,1.707S10,16.068,10,15.125c0-0.312-0.09-0.602-0.237-0.855h4.744c-0.146,0.254-0.237,0.543-0.237,0.855c0,0.943,0.766,1.707,1.708,1.707c0.944,0,1.709-0.764,1.709-1.707c0-0.328-0.097-0.631-0.257-0.891C17.55,14.182,17.639,14.074,17.671,13.945 M15.934,6.583h2.502l-0.38,1.709h-2.312L15.934,6.583zM5.505,6.583h2.832l0.189,1.709H5.963L5.505,6.583z M6.65,10.854L6.192,9.146h2.429l0.19,1.708H6.65z M6.879,11.707h2.027l0.189,1.709H7.338L6.879,11.707z M8.292,15.979c-0.472,0-0.854-0.383-0.854-0.854c0-0.473,0.382-0.855,0.854-0.855s0.854,0.383,0.854,0.855C9.146,15.596,8.763,15.979,8.292,15.979 M11.708,13.416H9.955l-0.189-1.709h1.943V13.416z M11.708,10.854H9.67L9.48,9.146h2.228V10.854z M11.708,8.292H9.386l-0.19-1.709h2.512V8.292z M14.315,13.416h-1.753v-1.709h1.942L14.315,13.416zM14.6,10.854h-2.037V9.146h2.227L14.6,10.854z M14.884,8.292h-2.321V6.583h2.512L14.884,8.292z M15.978,15.979c-0.471,0-0.854-0.383-0.854-0.854c0-0.473,0.383-0.855,0.854-0.855c0.473,0,0.854,0.383,0.854,0.855C16.832,15.596,16.45,15.979,15.978,15.979 M16.917,13.416h-1.743l0.189-1.709h1.934L16.917,13.416z M15.458,10.854l0.19-1.708h2.218l-0.38,1.708H15.458z"
              ></path>
            </svg>
            <p style={{ fontSize: "0.6rem" }}>Cart</p>
          </center>
        </li>
        <li style={{marginRight:'5px'}}>
          <center>
            <svg  viewBox="0 0 20 20">
              <path d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
            </svg>
            <p style={{ fontSize: "0.6rem" }}>Search</p>
          </center>
        </li>
        <li style={{marginRight:'5px'}}>
          <center>
            <svg  viewBox="0 0 20 20">
              <path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
            </svg>
            <p style={{ fontSize: "0.6rem" }}>Account</p>
          </center>
        </li>
      </ul>
    </nav>
  );
}

style.css

@import url(https://fonts.googleapis.com/css?family=Raleway);

* {
  margin: 0;
  padding: 0;
}

a {
  color: #000;
}

/* header */

.header {
  background-color: #fff;
  box-shadow: 5px 5px 4px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
  display:flex;
  align-items: center;
  justify-content: space-between;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  font-size: 250%;
  padding: 10px;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

.brlarge {
  display: block;
  margin-bottom: 6em;
}

.svg-icon {
  width: 1.3em;
  height: 1.3em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}

.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.searchbtn,
.myinput {
  font: 1em Hind, sans-serif;
  line-height: 1.5em;
}
.myinput {
  color: #171717;
}
.search-bar {
  
  float: left;
}

.search-bar .myinput,
.search-btn,
.search-btn:before,
.search-btn:after {
  transition: all 0.25s ease-out;
}
.search-bar .myinput,
.search-btn {
  width: 3em;
  height: 3em;
}
.search-bar .myinput:invalid:not(:focus),
.search-btn {
  cursor: pointer;
}

.search-bar .myinput:focus,
.search-bar .myinput:valid {
  width: 50%;
}
.search-bar .myinput:focus,
.search-bar .myinput:not(:focus)   .search-btn:focus {
  outline: transparent;
}
.search-bar {
  padding: 1.5em;
  
  max-width: 30em;
}
.search-bar .myinput {
  background: transparent;
  border-radius: 1.5em;
  box-shadow: 0 0 0 0.4em #171717 inset;
  padding: 0.75em;
  transform: translate(0.5em, 0.5em) scale(0.5);
  transform-origin: 100% 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.search-bar .myinput::-webkit-search-decoration {
  -webkit-appearance: none;
}
.search-bar .myinput:focus,
.search-bar .myinput:valid {
  background: #fff;
  border-radius: 0.375em 0 0 0.375em;
  box-shadow: 0 0 0 0.1em #d9d9d9 inset;
  transform: scale(1);
}
.search-btn {
  background: #171717;
  border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
  padding: 0.75em;
  position: relative;
  transform: translate(0.25em, 0.25em) rotate(45deg) scale(0.25, 0.125);
  transform-origin: 0 50%;
}
.search-btn:before,
.search-btn:after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
}
.search-btn:before {
  border-radius: 50%;
  box-shadow: 0 0 0 0.2em #f1f1f1 inset;
  top: 0.75em;
  left: 0.75em;
  width: 1.2em;
  height: 1.2em;
}
.search-btn:after {
  background: #f1f1f1;
  border-radius: 0 0.25em 0.25em 0;
  top: 51%;
  left: 51%;
  width: 0.75em;
  height: 0.25em;
  transform: translate(0.2em, 0) rotate(45deg);
  transform-origin: 0 50%;
}
.search-btn span {
  display: inline-block;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

/* Active state */
.search-bar .myinput:focus   .search-btn,
.search-bar .myinput:valid   .search-btn {
  background: #2762f3;
  border-radius: 0 0.375em 0.375em 0;
  transform: scale(1);
}
.search-bar .myinput:focus   .search-btn:before,
.search-bar .myinput:focus   .search-btn:after,
.search-bar .myinput:valid   .search-btn:before,
.search-bar .myinput:valid   .search-btn:after {
  opacity: 1;
}
.search-bar .myinput:focus   .search-btn:hover,
.search-bar .myinput:valid   .search-btn:hover,
.search-bar .myinput:valid:not(:focus)   .search-btn:focus {
  background: #0c48db;
}
.search-bar .myinput:focus   .search-btn:active,
.search-bar .myinput:valid   .search-btn:active {
  transform: translateY(1px);
}

@media screen and (prefers-color-scheme: dark) {
  .myinput {
    color: #000;
  }

  .search-bar .myinput {
    box-shadow: 0 0 0 0.4em #000 inset;
  }
  .search-bar .myinput:focus,
  .search-bar .myinput:valid {
    background: #fff;
    box-shadow: 0 0 0 0.1em #3d3d3d inset;
  }
  .search-btn {
    background: #000;
  }
}

Just a small suggestion , replace class with className in App.js

CodePudding user response：

you can add these styles to your .header :

.header {
   display: flex;
   align-items: center;
}