<div class="centerflex">
  <div class="logo">
    <svg viewBox="0 0 232 40" width="232">
      <path d="M10.8 39V18.8L17.2 33H23l6.4-14.2V39h10.5V.7H28.4l-8.3 18-8.3-18H.3V39h10.5zm55.5 0V26.3L79.5.7H68.1l-7 16.5L54 .7H42.9l13 25.5V39h10.5zm44 0v-9.2H92.9V.7H82.4V39h27.9zm20.5.3a18.9 18.9 0 0014-5.9 19.7 19.7 0 005.5-13.4A19.5 19.5 0 00145 6.5a18.4 18.4 0 00-14-6.1 19.2 19.2 0 00-14 5.9 19.4 19.4 0 00-.3 27 18.4 18.4 0 0014 6zm0-9.3a8.2 8.2 0 01-6.6-3.1c-.7-1-1.2-2-1.6-3.3a13 13 0 010-7.4c.3-1.2.9-2.3 1.6-3.3a8 8 0 016.6-3.1c1.5 0 2.8.3 3.9.8 1 .6 2 1.3 2.7 2.2.8 1 1.3 2 1.7 3.2a13 13 0 01-1.6 10.8A8 8 0 01131 30zm40.6 9.3c3.5 0 6.7-1.2 9.4-3.5V39h8.7V18.6h-15.8V26h6.7c-2.4 2.6-5 3.8-8.1 3.8a8 8 0 01-6.4-2.8c-.8-.8-1.4-1.9-1.8-3.1-.5-1.2-.7-2.6-.7-4.1 0-1.5.2-2.9.7-4a10 10 0 011.8-3.3 7.8 7.8 0 016.2-2.9c1.6 0 3.2.5 4.7 1.4 1.5 1 2.7 2.1 3.4 3.7l7.9-6c-.7-1.3-1.6-2.5-2.7-3.5a17.3 17.3 0 00-8-4.3 21.3 21.3 0 00-12.8.9 18.7 18.7 0 00-12 17.6c.1 3.1.6 6 1.6 8.4 1 2.4 2.4 4.5 4.1 6.2a17 17 0 006 3.8c2.2 1 4.6 1.4 7 1.4zm40.6 0a18.9 18.9 0 0014-5.9 19.7 19.7 0 005.5-13.4 19.5 19.5 0 00-5.3-13.5 18.4 18.4 0 00-14-6.1 19.2 19.2 0 00-14 5.9 19.4 19.4 0 00-.3 27 18.4 18.4 0 0014 6zm0-9.3a8.2 8.2 0 01-6.6-3.1c-.7-1-1.2-2-1.6-3.3a13 13 0 010-7.4c.3-1.2.9-2.3 1.6-3.3a8 8 0 016.6-3.1c1.5 0 2.8.3 3.9.8 1 .6 2 1.3 2.7 2.2.8 1 1.3 2 1.7 3.2a13 13 0 01-1.5 10.8A8 8 0 01212 30z" fill="#F09" fill-rule="nonzero"/>
    </svg>
  </div>

  <nav aria-label="main">
    <ul>
      <li>Partners</li>
      <li>About</li>
      <li>Source</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>
:root {
  /* ↓ Use these variables to customise the albatross. */
  //--centerflex-gap: 3rem;
  //--centerflex-threshold: 45rem;
}

.centerflex {
  /* ↓ Save the large negative or large positive value to a variable */
  --multiplier: calc((var(--centerflex-threshold, 38rem) - 100%) * 666);
  
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* ↓ Multiply by -1 to make negative */
  margin: calc(var(--centerflex-gap, 1rem) / 2 * -1) 0;

  &:before {
    content: "";
    flex-grow: 666;
    margin: 0;
    background: #f09;
    /* ↓ If --multiplier is negative, use 0px instead */
    flex-basis: Max(0px, var(--multiplier));
  }

  > * {
    /* ↓ Half the value to each element, combining to make the whole */
    margin: calc(var(--centerflex-gap, 1rem) / 2) auto;

    &:first-child {
      order: -1;
    }
  }
  
}

// Additional CSS Stuff. Not needed for the albatross

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  padding: 1em;
  background: linear-gradient(-135deg, #005, #001);
  min-height: 100vh;
  color: #fff;
}

.logo svg {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: -0.5em;
}

li {
  margin: 0.5em;
}



View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.