I've tried using text-align and justify-content but both of them refuse to work. I think I've made a mistake with all the spacings. Here's the HTML:

.container1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 400px;
    height: 200px;
}

.contents1 {
    display: flex;
    margin: 0 auto;
}

<div class="contents1">
        <div class="container1">
                <h1>This website is awesome</h1>
                <p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
                <div class="button">Sign up</div>
        </div>

        <div class="image">
           <div class = "placeholder">this is a placeholder for an image</div>
        </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Put the justify-contents and align-items into class image

.container1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.image{
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 400px;
    height: 200px;
}

CodePudding user response：

It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors. For the container which has a display:flex, please add

width:100%;

CodePudding user response：

.container1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 75%;
    margin: auto;
}

.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 75%
    height: 200px;
    margin: auto;
}

.contents1 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

<div class="contents1">
        <div class="container1">
                <h1 class="center">This website is awesome</h1>
                <p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
                <div class="button">Sign up</div>
        </div>

        <div class="image">
           <div class = "placeholder">this is a placeholder for an image</div>
        </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1

CodePudding user response：

.container1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 400px;
    margin: auto;
}

.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: #6D747D;
    width: 400px;
    height: 200px;
    margin: auto;
}

.contents1 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

<div class="contents1">
        <div class="container1">
                <h1 class="center">This website is awesome</h1>
                <p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
                <div class="button">Sign up</div>
        </div>

        <div class="image">
           <div class = "placeholder">this is a placeholder for an image</div>
        </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>