CSS3 Border issue when displaying my web page-CodePudding

I have a problem when displaying my web page I'm using CSS border and margin in my code, but the output in my browser is very awkward this is my code and this is the output :

div {
    width: 300px;
    background-color: #DDD ; 
    padding: 10px;
    border: 10px solid red; 
    margin: 10px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h1>Product title</h1>
        <p>This is a paragraph</p>
    </div>
</body>
</html>

The output of my code in the browser

CodePudding user response：

It looks like you have a second div element after the first one.

It might also be Tag soup, you could try to validate your HTML and see if you have any errors or warnings.

div {
    width: 300px;
    background-color: #DDD ; 
    padding: 10px;
    border: 10px solid red; 
    margin: 10px;
}

<div>
   <h1>Product title</h1>
   <p>This is a paragraph</p>
</div><div>

CodePudding user response：

There is a possibility that you have 2 div tags after I see the results of your code. For my solution, you can create a card attribute as a product container like this:

.card {
    width: 300px;
    background-color: #DDD ; 
    padding: 10px;
    border: 10px solid red; 
    margin: 10px;
}

<div >
   <h1>Product title</h1>
   <p>This is a paragraph</p>
</div>

CodePudding user response：

Have You tried to run it on anyother browsers as your code is seems fine there is no problem in it.