Tea Cozy Project Issue

Hi Everyone,

I am new to coding but thought I had been picking it up ok so far - now I have come across a stumbling block!!

I am on the practice exercise to create the TeaCozy website on my own computer.

I have managed to get the background image the top and our the h2 and h4 headers there BUT :

  1. I have centre the text with a black background horizontally within the image but I can’t get it to centre vertically?
  2. The black back ground is significantly wider than it should be and I can’t figure out how to get it narrower.

Any help appreciated.

Thanks!

Here is the HTML I am using :

        <body>
            <div class="mainbanner">
                <div class="mission">
                    <h2>Our Mission</h2>
                </div>
    <div class="mission">
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>

</div>

And here is the CSS :

.mainbanner {
background-image: url("/Users/john/Desktop/Visual Studio Code Projects/Tea Cozy/TeaCozy/Resources/Images/img-mission-background.jpg");
height: 700px;
width: 1200px;
border-top:1px solid seashell;
}
.mission {
color: seashell;
display: inline-block;
text-align: center;
width: 100%;
font-family: helvetica;
font-size: 22px;
opacity: 0.9;
background-color: black;
}

https://vdmklchv.github.io/tea_shop/ - Feel free to explore my code, just finished it.

1 Like

Thanks - that’s really helpful!