.header {
  color: #eee;
  background: #111;
}

.nav {
  display: flex;
  flex-direction: row;

  max-width: 60rem;
  margin: 0 auto 1rem;
  padding: 0 1rem;
  line-height: 3rem;
}

.navPart1 {

  @media (width >= 60rem) {
    flex-grow: 1;
  }
}

.navPart2 {
  display: flex;
  flex-direction: row;
}

.link {
  display: flex;
  align-items: center;

  margin-left: 1rem;

  color: inherit;
  text-decoration: none;
}

.link svg {
  fill: currentColor;
  opacity: 0.5;
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

:root {
  --nav-item-padding: 0.5rem;
}

.header {
  color: #eee;
  background: #111;
}

.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  max-width: calc(60rem + (var(--nav-item-padding) * 2));
  margin: 0 auto 1rem;
  padding: 0 1rem;
  line-height: 3rem;
}

.navPart1,
.navPart2 {
  display: flex;
  flex-direction: row;
}

.link {
  display: flex;
  align-items: center;

  padding: 0 var(--nav-item-padding);

  color: inherit;
  text-decoration: none;
}

.link svg {
  fill: currentColor;
  opacity: 0.5;
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

Fix default boilerplate nav spacing
Fix default boilerplate nav spacing
