在最大宽度Flexbox中定位元素

Question

我试图使用css将两个图像放在flexbox（column1）的两侧，这些图像包含在flexbox（标题）本身中。两者的最大宽度都是1024px，页面的布局是这样的，页眉和页脚是固定的。我已搜索并应用了本网站提供的答案，但尚未找到任何解决方案。这看起来很简单，但我不确定我做错了什么，请帮忙。

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

#container {
  max-width: 1024px;
  min-width: 450px;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

#header {
  height: 100px;
  max-width: 1024px;
  min-width: 450px;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}

#middleground {
  max-width: 1024px;
  min-width: 450px;
  max-height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
}

#footer {
  height: 80px;
  max-width: 1024px;
  min-width: 450px;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}

.column1 {
  max-width: 1024px;
  display: flex;
  align-items: center;
}

.logo {}

.nav {}

.column2 {
  max-width: 1024px;
}

.eightball {}

.column3 {
  max-width: 1024px;
  margin: auto;
}

.copy {
  font-size: 10pt;
  font-family: Arial;
}

＆＃13;

<div id="container">
  <div id="header">
    <div class="column1">
      <span class="logo"><a href="indx.html"><img src="Images/brand-logo-1.png" alt="logo" height="60" width="195"/></a></span>
      <span class="nav"><img src="Images/nav100.png" alt="logo" height="25" width="25"/></span>
    </div>
  </div>
  <div id="middleground">
    <div class="column2">
      <span class="eightball"><a href="shop/8ball.html"><img src="Images/8ball.png" alt="logo" height="150" width="150"/></a></span>
    </div>
  </div>
  <div id="footer">
    <div class="column3">
      <div class="copy">T I T L E &copy 2 0 1 7 </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;