Help with putting elements in the same flex container for Tea Cozy project

Projects
1

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy

I am having an issue with positioning some elements in the Tea Cozy project. The elements display off to the right side of the container that I want it to display within. I’m a bit stuck on how to fix this issue.

CSS

html,
body {
    font-size: 22px;
    font-family: Helvetica;
    background-color: black;
    color: seashell;

}


.container {
    display: flex;
    height: 700px;
    width: 1200px;
    background-color: black;
  
}

.header {
    display: flex; 
    height: 69px;
    border-bottom: 1px solid seashell;
    width: 1200px;

}
.header img {
    height: 50px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-decoration: underline;
    display: inline-block;
    font-family: Helvetica;
    font-size:22px;
   }

.mission {
    height: 700px;
    width: 1200px;
    padding: 10px;
    display: flex;
    opacity: 0.9;
    
}

.rectangle h2  {
    color: white;
    text-align: center;
    padding: 0;
    flex-direction: row;
}


items h2 {
    padding: 0;
    color: white;
    text-align: center;
    background-color: black;
    height: 50px;
    width: 1200px;
    flex-direction: row;
    
   
}
.rectangle h4   {
    color: white;
    text-align: center;
    padding: 0;
    display: flex;
    flex-direction: row;
    
}

items h4 {
    padding: 0;
    color: white;
    text-align: center;
    background-color: black;
    height: 50px;
    width: 1200px;
    border-color: black;

}

.rectangle {
    background-color: red;
    height: 50px;
    width: 1200px;  
    display: flex;
    align-items: center;
    flex-direction: row;
}
.items {
    width: 1000px; 

}

.items img {
    height: 200px;
    width: 300px;
    padding: 10px;
    display: inline-block wrap;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    align-items: center;
}

p {
    color: white;
}
.locations {
    display: block;
    width: 1200px;
    height: 500px;
     margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

teacozy-screenshot
teacozy-screenshot1600×860 432 KB

2

Please post your HTML so we have a context for the selectors in your style sheet.

items is not a node type, but in your CSS their is a class, .items. Perhaps this is the only bug?

3

I am unable to attach my html file - I get an error that prevents me from uploading. Hopefully the screen shot will show below. l Thank you for your help.

image
image1600×860 21.7 KB

4

Just past the HTML into a reply. Did you try fixing the two errors I previously pointed out?

5

will do later today.

6

made the suggested change but, it did not resolve the problem with the info displaying off to the side.

7

That was not suggested. They were errors. Where are we, now?

8

Same place as before. Thanks anyway.

9

Here is the html. , it is the rectangle class that seems to be displaying off to the right of the mission class instead of displaying in the middle of it as shown in the spec.

I’ve put this aside for a bit and moved to another lesson but, will pick this up again if you can see where I’ve gone wrong.

Thanks

    <div class="header">
    <img src="./img/img-tea-cozy-logo.png" alt="Tea Cozy Logo"/>
    
        <ul> 
            <li>Mission</li>
            <li>Featured Teas</li>
            <li>Locations</li>
        </ul>
    </div>
a nice cup of tea

Our Mission

Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea

Tea of the Month

What/'s steeping at The Tea Cozy

Berry Blitz Spiced Rum donut Myrtle Bedford Bizzare

Fall Berry Blitz Tea

Spiced Rum Tea

Seasonal Donuts

Myrtle Ave Tea

Bedford Bizarre Tea

</div>
<div class="locations">
      <img src="./img/img-locations-background.jpg" alt="locations"/>
      <p>Locations</p>
</div>
10

Given my own concerns, it might be best to bookmark this and wake me up when you come back to it. I’m sure you will be better informed and our conversation will be alot different.