Блог

Я не могу решить проблему CSS. Я работаю над заголовком страницы и хочу создать логотип, ссылки и значки социальных сетей в одной строке. Проблема в том, что когда я добавляю социальные значки, они отображаются на второй строке, но когда в заголовке есть только логотип и ссылки, все выглядит хорошо. Как решить проблему?

Скриншот только с логотипом и ссылками

Мой код выглядит следующим образом:

 const HeaderLink = props => {
return (
<Link
  css={{
    fontSize: "0.9rem",
    fontWeight: 300,
    color: theme.colors.lightText,
    letterSpacing: 0.5,
  }}
  {...props}
>
</Link>
)
}


 <header
   css={{
    width: "100%",
    maxWidth: "100%",
    padding: "0 24px",
    position: "fixed",
    background: "#fff",
    boxShadow: "0 0 0.35rem rgba(0,0,0,.25)",
    zIndex: "100",
    top: 0,
  }}
 >
 <div
   css={{
      minHeight: "4.5rem",
      display: "grid",
      maxWidth: 1070,
      margin: "0 auto",
      gridTemplateColumns: "auto 1fr",
      alignItems: "center",

  }}
 >
 
 <Link to="/ ">
    <img style={{ height: "2.5rem" }} src={logo} alt="logo" />
 </Link>

 <div
    css={{
        display: "grid",
        gridAutoFlow: "column",
        gridAutoColumns: "max-content",
        gridGap: 24,
        justifyContent: "center",
        alignItems: "center",
    }}>
      <HeaderLink to="/about-us/">About Us</HeaderLink>
      <HeaderLink>Projects</HeaderLink>
      <HeaderLink>Bloh</HeaderLink>
      <HeaderLink>E-shop</HeaderLink>
      <HeaderLink>Contacts</HeaderLink>
 </div>
 <div
    css={{
        display: "grid",
        gridAutoFlow: "column",
        gridAutoColumns: "max-content",
        justifyContent: "end",
        alignItems: "center",
    }}
    >
    <a
       title="Facebook page"
       target="_blank"
       rel="noopener noreferrer"
       css={{
          marginRight: "0.5rem",
       }}
    >
      <FBIcon />
    </a>
    <a
       title="Pinterest page"
       target="_blank"
       rel="noopener noreferrer"
       css={{
          marginRight: "0.5rem",
       }}
    >
       <PinterestIcon />
    </a>
    <a
        title="Instagram feed"
        target="_blank"
        rel="noopener noreferrer"
        css={{
          marginRight: "0.5rem",

        }}
    >
        <InstagramIcon />
    </a>
 </div>

</header>
  

Пожалуйста, перейдите к https://jsfiddle.net / и вставьте туда свой HTML и CSS. Скопируйте ссылку и вставьте ее сюда, чтобы люди могли лучше понять проблему. Ваш вопрос в основном касается кода, и это не очень помогает.

Вам не хватает закрывающего div тега.