@sdetweil I’ve gone through a plethora of pages regarding Flexbox. What I am failing to understand, and probably in part due to my limited coding experience, is why only that single item of the 4 is not cooperating.
The way I understand is I have the flex container, which in this case is the top_bar? Then I have items within the container. My flex items would be the .clock, .weather, .weather and .MMM-MoonPhase. So should I be using a word other than .MMM-MoonPhase when adjusting the flex box position? Such as, in the example below, should .MMM-MoonPhase be replaced with another code that will then apply to the moon phase? This is where it gets muddy for me. And I know the second MMM-MoonPhase down there by itself is redundant, I was just testing.
.clock, .weather, .MMM-MoonPhase {
display: inline-flex;
justify-content: space-around;
align-items: flex-start;
margin-right: 25px;
margin-left: 25px;
background-color:rgba(255, 255, 255,0.6);
width: 300px;
height: 180px;
border-radius:20px;
padding: 8px;
color: #616161;
}
.MMM-MoonPhase {
background-color: rgba(255, 255, 255, 0.6);
width: 250px;
height: 180px;
border-radius:20px;
padding: 8px;
color: #616161;
}
So if bring up the developers window, and change the inline-flex, align-items, they all 4 move around, just that single Moonphase is slight off from the others.

Honestly, I’ve been tweaking and editing this thing for a good year or so, I might be better off making a backup of some stuff and starting fresh.