Div tag not covering full width of webpage

div tag is supposed to make the entire width of the page into dark greay, but only one box is drawn.

this is the output im getting -
image

Hi @narayana_m

Can you share a screenshot of the code so that we can get a better idea of the code structure and provide a with a better solution.

these are index.html code


The last two are the coffeeshop.css code

Since you have included ‘id=mocha’ in the div tag containing the image of mocha, the background has probably changed but is not visible because your image is enlarged. Try resizing the image to a smaller size and then check the background.

Hi @narayana_m,

From the code, we see that you have not closed the div tag properly for the class="available-coffee"

 <div class="available-coffee">
        <p>This is a normal text.</p>
        <p>This is <b>bold.</b></p>
        <p>This is <i>italic.</i></p>
        <p>This is <strong>strong</strong></p>
        <p>This is <em>emphasized</em></p>
        <p>This is <sub>subscript</sub></p>
        <p>This is <sup>superscript</sup></p>
        <p>This is <del>deleted.</del></p>
    </div>

The code would be


<div class="available-coffee">
        <p>This is a normal text.</p>
        <p>This is <b>bold.</b></p>
        <p>This is <i>italic.</i></p>
        <p>This is <strong>strong</strong></p>
        <p>This is <em>emphasized</em></p>
        <p>This is <sub>subscript</sub></p>
        <p>This is <sup>superscript</sup></p>
        <p>This is <del>deleted.</del></p>
    </div>

    <div class="available-coffee out-of-stock" id="mocha">
        <h4>Mocha</h4>
        <img src="mocha.png" class="div-img">
    </div>

    <div class="available-coffee in-stock">
        <h4>Cappuccino</h4>
        <img src="Cappuccino.png" class="div-img">
    </div>

    <footer class="footer">
        <a href="index.html">HOME</a>
        <a href="product.html">PRODUCT</a>
        <div>Designed by bolt copyright@inventrom</div>
    </footer>
</body>
</html>

And the CSS code is

.footer {
    background-color: #272727;
    color: white;
    height: 100px;
    font-size: 20px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.coffee-list {
    list-style-type: square;
}

.available-coffee {
    height: 300px;
    width: 300px;
    font-size: 16px;
}

.out-of-stock {
    border-top: 2px dotted red;
    border-bottom: 2px dotted green;
    font-size: 17px;
    font-style: italic;
    font-family: georgia;
}

.in-stock {
    border: 4px double green;
}

.div-img {
    height: 80%;
    width: 100%;
}

#mocha {
    color: grey;
}

.pricing-table {
    width: 100%;
    font-family: 'Arial Black', Gadget, sans-serif;
    border: 2px solid green;
}

.caption-heading {
    color: #2979a8;
}

th {
    background-color: #32a87d;
    height: 50px;
    color: white;
    font-size: 22px;
}

td {
    height: 50px;
    font-size: 21px;
    color: #7c4c29;
    text-align: center;
}

.tr-out-of-stock:hover {
    background-color: #ffcccc;
}

.tr-in-stock:hover {
    background-color: #ccffe6;
}

This should ensure that your footer spans the full width of the page and that the other elements are displayed as intended.