Off Platform Fotomax Project - CSS Footer spacing

[micro0129302785]

Link to Project:
[https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-making-a-website-responsive/modules/wdcp-22-learn-css-documentation-and-debugging/informationals/f1-2-c1p1-fotomatic]

This how the footer displays. However, I cannot discern from the HTML and CSS why the large space between the copy right span and attribution span. It looks great. I understand the content div is a flex box, and the spans are flex items and they will display inline by default. I do not understand the spacing.

HTML

    <!-- Footer -->
    <footer>
      <div class="content">
        <span class="copyright">© 2016  Fotomatic, All Rights Reserved</span>
        <span class="location">Designed in NYC</span>
      </div>
    </footer>

CSS:
/* Footer */
footer {
background-color: #9b9b9b;
padding: 1.5rem 2rem;
}

footer .content {
color: white;
display: flex;
font-size: .75rem;
}

footer .copyright {
flex-grow: 1;
}

@media only screen and (max-width: 600px) {
footer .content {
font-size: .625rem;
}
}

[micro0129302785]

Additional information:
I should have included that the display: flex allows us to use flex-grow: 1 which produces the result in the image of the footer (above). However, it does not explain why those spans grew so disproportionally.

Flow Layout algorithm specifies that span elements are displayed inline. So we did not need the display:flex for that. But it does enable us to flex-grow: 1. I hope someone can explain this.

[micro0129302785]

My final stab at it:

The look we want must be a html block containing a div (or other block level tag) with display:flex, and two spans with flex-grow: 1. Other block level tags worked instead of span.

Theory: The flex algorithm displays this special style inside blocks with a child block set to display: flex and the flex items set to flex-grow: 1. Otherwise, it displays spans the same as the flow algorithm.

I suspect the first flex-items gets the full width of screen, subsequent flex-items get whatever their content dictates.

HTML:

<!-- Footer -->
    <h2>1: Inside footer block</h2><br>
    <footer>
      <div class="content"> <!--flex container-->
        <span class="copyright">© 2022 Skilled Programming, All Rights Reserved</span>
        <span class="location">Designed in KC</span> 
      </div>
    </footer><br>
<hr/>
    
    <h2>2: The content (flex container) div copied and pasted outside of footer block</h2>
    <h1>substituting other tags for the containing div 
      including semantic tags display like this except the header tag </h1><br>
      <div class="content"> <!--flex container-->
        <span class="copyright">© 2022 Skilled Programming, All Rights Reserved</span>
        <span class="location">Designed in KC</span>
      </div> <br>
<hr>

CSS:
span {
  border: solid red 1px;
}
/* Footer */
footer {
  background-color: #9b9b9b;
  padding: 1.5rem 2rem;
}

footer .content {
  color: white;
  display: flex;
  font-size: .75rem;
}

footer .copyright {
  flex-grow: 1;
}

/*  trying out the header tag */

header {
  border: solid red 1px;;
}

header {
  background-color: #9b9b9b;
  padding: 1.5rem 2rem;
}

header .content {
  color: white;
  display: flex;
  font-size: .75rem;
}

header .copyright {
  flex-grow: 1;
}

h2 {
  font-weight: bold;
}
h1, h2 {
  padding: 2px
}
hr {
  width: 100%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  height: 5px;  
}