<h2>The following is a test piece in support of a member's query on the Sitepoint forum</h2>

<p>The query in question can be found here - <a href="https://www.sitepoint.com/community/t/basic-css-object-alignment-on-the-both-sides/219767">Basic CSS Object Alignment</a></p>
<!-- Member's code is below -->

<div id="maincontainer">
  <header>
    <a href="#" id="logo"></a>
    <nav>
      <a href="#">ABC</a>
      <a href="#">DEF</a>
      <a href="#">GHI</a>
      <a href="#">JKL</a>
    </nav>
  </header>
</div>

header {
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 0.625em 0.625em 0;
}

nav {
  background-color: #fff;
  float: right;
  margin: 0 0 0.625em 1.25em;
  max-width: 15.625em;
  width: 100%;
}

nav a {
  display: inline-block;
  margin: 0 0.2em;
  padding: 0.5em;
}

#maincontainer {
  background-color: rgba(0, 0, 0, 0.5);
  margin: 1em auto;
  width: 90%;
}

#logo {
  background-color: #f00;
  float: left;
  height: 3.25em;
  margin: 0 1.25em 0.625em 0;
  max-width: 15.625em;
  width: 100%;
}