Tea Cozy Project

Here is my current Tea Cozy site: file:///C:/Users/JrjZi/source/repos/Tea_Cozy/HTMLPage1.html

I can’t figure out why my images and text in the Tea of the Month section looks the way it does. It should have 3 images on top and two on the bottom but I’m only getting rows of two with the text displayed off to the side.

In the location section there is no space between my boxes. I have it set to 40px in the CSS file but it does not seem to be displaying correctly. Below is my HTML and CSS code for those sections.

<div id="featured">
        <h1>Tea of the Month</h1>
        <h2>What's Steeping at The Tea Cozy</h2>
    </div>
    <div class="trend-container">
        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*c288ln*_ga*Nzk1NjIxODIyMC4xNjU4NDkzMzEy*_ga_3LRZM6TM9L*MTY1ODkzNTI5Ni4xMy4xLjE2NTg5MzU4NzguNjA.";
            <h3>Berry Blitz</h3>
        </div>
        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1prl9cf*_ga*Nzk1NjIxODIyMC4xNjU4NDkzMzEy*_ga_3LRZM6TM9L*MTY1ODkzNTI5Ni4xMy4xLjE2NTg5MzU4NzguNjA.";
            <h3>Spiced Rum Tea</h3>
        </div>
        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*h3czqo*_ga*Nzk1NjIxODIyMC4xNjU4NDkzMzEy*_ga_3LRZM6TM9L*MTY1ODkzNTI5Ni4xMy4xLjE2NTg5MzU4NzguNjA.";
            <h3>Seasonal Donuts</h3>
        </div>
        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*1ico65s*_ga*Nzk1NjIxODIyMC4xNjU4NDkzMzEy*_ga_3LRZM6TM9L*MTY1ODkzNTI5Ni4xMy4xLjE2NTg5MzU4NzguNjA.";
            <h3>Myrtle Ave Tea</h3>
        </div>
        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*94jvin*_ga*Nzk1NjIxODIyMC4xNjU4NDkzMzEy*_ga_3LRZM6TM9L*MTY1ODkzNTI5Ni4xMy4xLjE2NTg5MzU4NzguNjA.";
            <h3>Bedford Bizarre Tea</h3>
        </div>
    </div>

    <div id="locations">
    </div>
    <div class="banner">
        <div class="text-top">
            <p>Locations</p>
        </div>
        <div class="box-container">
            <div class="box">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>
            <div class="box">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue'</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            <div class="box">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>
    </div>```

.trend-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.trend img {
height: 200px;
width: 300px;
padding: 10px 10px;
}

.banner {
height: 500px;
max-width: 1200px;
margin: 40px auto auto auto;
padding-top: 20px;
background-image: url(“https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*10mnk5c*_ga*Nzk1NjIxODIyMC4xNjU4NDkzMzEy*_ga_3LRZM6TM9L*MTY1ODkzNTI5Ni4xMy4xLjE2NTg5MzU4NzguNjA.”);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.text-top {
font-size: 43px;
font-weight: bold;
}

.box-container {
max-width: 1050px;
margin: 15px auto auto auto;
display: flex;
justify-content: space-between;
}

.box {
width: 300px;
padding: 20px;
margin-bottom: auto;
flex-basis: 30%;
box-sizing: content-box;
background-color: black;
opacity: 0.8;
}```

Hi there,

I recommend that you take a look at your “trend” <div>s–specifically the <img>. Once you get that problem fixed, it should be easier for you to get the alignment you’re looking for.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.