Display flex not center aligning

Question

#footer, #container:after{

	height: 150px;
}


#footer{

	background-color: #006699;
	clear: both;
}

#wrap {
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

#sub {

	padding: 12px;
	width: 32%;
	height: 40px;
	color: white;
	border-right: solid white 1px;
}

.sub:last-child{

	border: 0px;
}

<div id="footer">
	<div class="wrap">
		<div class="sub">Lorem Ipsum</div>
		<div class="sub">Lorem Ipsum </div>
		<div class="sub">Lorem Ipsum </div>
	</div>
</div>
	

Ok so I just did this yesterday and putting display flex on my wrap id in the footer worked perfectly fine. Today my layout has changed slightly, so it may be due to that, however, I cannot get my divs in the footer id to line up side by side. Basically I want each div to be evenly distributed along one axis in my footer, but at the current time they are stacking vertically, not horizontally.

Each sub is 40, so 40 X 3(3 sub divs) totals 120, which is far off from the total height of the footer, being 150px. I even made the flex-wrap nowrap. Can anyone help me as to why I am getting this problem?

<div id="footer">
    <div class="wrap">
        <div class="sub">Lorem Ipsum</div>
        <div class="sub">Lorem Ipsum </div>
        <div class="sub">Lorem Ipsum </div>
    </div>
</div>

Answer 1

This is a simple case of you referencing ID's in your CSS rather than classes.

#wrap / #sub rather than .wrap / .sub

* {
  box-sizg:border:box;
  }

#footer {
  height: 150px;
  background-color: #006699;
}
.wrap {
  display: flex;
  align-items:center;
}
.sub {
  padding: 12px;
  width: 32%;
  height: 40px;
  color: white;
  border-right: solid white 1px;
}

<div id="footer">
  <div class="wrap">
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
  </div>
</div>