I am currently working on a website layout where I want to display an image with some information below it, and the information should have a colored background with some margin around it. However, when I try to view the code I have written, the margin is not showing up as expected. Can anyone provide me with some guidance on how to resolve this issue? Your assistance would be greatly valued.
<html>
<style>
<head>
img {
padding:0; margin:0;
}
div {
font-size: 55px;
font-family: Impact;
color: #000066;
}
h1 {
margin: 10px 0 0 0;
background-color: red;
}
</style>
</head>
<body>
<img src="picmine.jpg" width="1440" height="500" style="position: absolute; top:0px; left:1px"/>
<div style="position: absolute; top:100px; left:350px"><center>Brantley and Brennan's Creations</div></center>
<h1><center>Love of Technology</h1></center>
</body>