Как разместить логотип в центре заголовка? [закрыто] ⇐ CSS

[Anonymous]

Я создаю приложение React, и у меня возникли проблемы с оформлением заголовка.
Это мой код:

Код: Выделить всё

export const StyledHeader = styled.header`
background-color: #fff;
color: #fff;
height: 70px;
border-bottom: 1px solid #000;
/*  position: absolute;
left: 0;
top: 0; */
width: 100%;
box-sizing: border-box;
display: flex;
/* flex: 1 1 0; */
`;

export const StyledNav = styled.div`
margin: 30px 0;
margin-left: 14px;

// box-shadow: inset 0 0 10px blue;
width: 14px;
height: 14px;
display: flex;
align-items: center;
background-image: url(${nav});
background-size: 100%;

// position: fixed;
`;

export const StyledHome = styled.div`
// box-shadow: inset 0 0 10px red;
display: flex;
justify-content: center;
width: 91px;
height: 35px;
margin: auto;
background-image: url(${logo});
// background: no-repeat;
background-size: 100%;
`;

и вот результат:
логотип не по центру заголовка


Кнопка-гамбургер слева — это StyledNav, а логотип — это элемент StyledHome. Мне нужно, чтобы логотип располагался по центру верхней части страницы, но в настоящее время он находится немного вправо из-за кнопки-гамбургера. Как я могу это исправить?

Подробнее здесь: https://stackoverflow.com/questions/783 ... -of-header