JSFiddle - React, Tailwind, and code Playground

by geirby

HTML

<header>
  <nav>
  <ul class="menu">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
  </nav>
  <div class="logo-container"> 
    <img class="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEX/AAD/fX3/jIz/m5v/q6v/uLj/trb/gYH/eHj/ior/2dn/dHT/qan/z8///Pz/ra3/lJT/pKT/8/P/5OT/oKD/yMj/lZX/srL/mppphzYMAAABmElEQVR4nO3dTU4DMRAF4XbGk59JIAESwv1PChIbxIYIqdWqcX2+wKulJUuO59e35el2m+f53ns/fUzfLpufDu3fdps/vU8PuPYHnOfftkvcY92O0asnJGsDFL5UT0jWYqqekMxCPgv5LOSzkM9CvhEKL9UTkrXYVE9IZiGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8o1QeKiekKx9nXWzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5WuyqJyQb4cXQ+l99WUhnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfCMUrv+fGQvpLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5Rii8Vk9I1uJUPSFZi149IZmFfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfC3O1ROStdhWT0jWYq6ekMxCPgv5LOSzkM9CPgv5LOQboXDtN+B9LMe2Zvv5EyTCB9hjiIitAAAAAElFTkSuQmCC">
   </div>
</header>

CSS

body{
  margin: 0;
  padding: 0;
}
header {
  /*этим свойством родительского контейнера я отцентровал все вложенные блоки*/
  text-align: center;
  width: 900px;
}
.logo-container {
 width: 15%;
  
  margin: 0 auto;
  height: auto;
}
.logo {
  height: auto;
  max-width: 100%;
  background: #ccc;
  border-radius: 20px;
  transform: rotate(45deg);
 }
 
nav {
  
}
.menu {
  width: 100% !important;
  position: relative;
  display: block;
  background: #aaa;
  /*это свойство я использовал, чтобы подтянуть картинку ПОД меню */
 margin-bottom: -115px;
 /*только для подтягивания всех элементов вверх */
 margin-top: 0px;
 /*margin-left: -40px;*/
 padding: 0;
 
}
img {
  
}
.menu li {
  z-index: 99;
  display: inline-block;
  padding: 10px 40px;
  background: #ccc;
}

.menu li:nth-child(2) {
  /* здесь я попытался разнести от второго пункта меню */
 margin-right: 250px;
}