Flexbox / Github Help

I have two questions please - they are driving me mad. I am 3 weeks into the front-end program. Please check out my link here:


  1. why does my image not show? it’s in the CSS as a link
  2. why can i not get the “learn more!” button to center with the rest of the flexbox???

Please ignore the ugliness of the site - more concerned with substance than style here.

I can’t see which image you’re missing. I see an image of beautiful Copenhagen as a background image.

I also don’t see what you tried to center your button. There is no style attempting it. display: flex is just set to the .main-container. That only affects the direct children.
Inline-block elements can be centered by adding text-align: center to their parent block level element.

Thank you for your reply! I see the image now, perhaps last night it was slow to update.

As for the button, can you show me how i would need to change the code to make it flex with the other two main-container elements? I assumed that because it was in the same div it would all be in the flexbox, is that not true?

<section class="copenhagen">
    <h1 class="main-header">Welcome to Copenhagen!</h1>
    <p>the capital of denmark</p>
    <button class="button">Learn more!</button>

You have to add display: flex; to all direct parent elements. But I don’t think that’s what you want here as it would display your headline, paragraph and button on one line.
So just wrap your button in a <p> tag and set that to text-align: center.

Oh wow! thanks! I was going mad trying to figure it out. I think i need a refresh on parent/child elements. Thanks again!