CSS Tea Cozy issue

Hello everybody,

I’m currently working on the “tea cozy” project, at the end of the layout with flexbox lesson.
I think I’ve done fairly well at finding the reasons of my issues (for once) but I can’t figure out how to center my div with the h2 “our mission”. If my window’s bigger, my image repeat itself. So I tried background-repeat, but then the image and div stays on the left of my page.
I tried justify-content, align-items, text align, the margins etc and to understand where could be the issue but can’t put my finger on it… If anybody can tell me what I’m doing wrong and why, that would be a huge help !
Thanks in advance :slight_smile:

html

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" type="text/css" rel='stylesheet'>
    
    <title>The Tea Cozy</title>
    
</head>
<body>
    
  <!-- header -->
    
    <header class="flex-container">
        
            <img src="img-tea-cozy-logo.png">
            
            <nav>
                <span><a href="mission">Mission</a></span>
                 <span><a href="store">Featured Tea</a></span>
                 <span><a href="locations">Locations</a></span>
                
            </nav>       
        
    </header>
    
    <!-- Main -->
    
    <div class="main">
        
     <!-- Mission section -->   
    
    <div id='mission' class="flex-container">
    
        <div class="mission-contenu">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
         </div>
    
    <!-- Tea of the Month -->
  
    <div class="store" >
       <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
        
        <div class="flex-container items" >
        
            <div class='item'>
                <img src="img-berryblitz.jpg">
            <p>Fall Berry Blitz Tea</p>
            </div>
            
            <div class='item'>
                <img src="img-spiced-rum.jpg">
            <p>Spiced Rum Tea</p>
            </div>
            
            <div class='item'>
                <img src="img-donut.jpg">
            <p>Seasonal Donuts</p>
            </div>
            
            <div class='item'>
                <img src="img-myrtle-ave.jpg">
            <p>Myrtle Avenue Tea</p>
            </div>
            
            <div class='item'>
                <img src="img-bedford-bizarre.jpg">
            <p>Bedford Bizarre Tea</p>
            </div>
        
        
        </div>
    </div>

    
       
        
  </body>



</html>

CSS

body {
    font-family: helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    margin: 0;
    text-align: center;
}

.flex-container {
    
    display: flex;
    flex-wrap: wrap;
}

header {
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    align-items: center;
    position: fixed;
    z-index: 1;
    background-color: black;
    
}

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

nav {
    text-align: right;
    flex-grow: 1;
}
nav span {
  display: inline-block;
  padding: 20px 10px;
}

main {
    padding-top: 69px;
    opacity: 0.9;
  width: 1200px;
  margin: auto;
}

#mission {
    background-image: url(img-mission-background.jpg);
    height: 700px;
    padding-top: 70px;
    
}


.mission-contenu {
  margin: auto;
  background-color: black;
  width: 100%;
}

h2, h4 {
    text-align: center;
}

.store {
    width: 1000px;
    margin: auto;
}

.items {
    text-align: center;
    justify-content: center;
    
}

.item img {
    height: 200px;
    width: 300px;
    margin: 10px;
    display: block;
    margin: 10px;
}

.item p {
    
}


Hi,

You were on the right path using background-repeat: no-repeat.

To address the positioning try using background-position: ?????.

I’m sure you can guess what you need to write in place of ???.

Hi Winningblue,

Thank you for that, looks fine now !

1 Like