I'm facing an issue with the spacing between a H1 and H2 tags inside a "welcome" div. I want to reduce the gap between the word welcome and the second line of text, but I can't seem to figure it out. Any suggestions on how to solve this simple problem would be highly appreciated. Please refer to the image below for clarification along with my HTML/CSS code.
Here is my HTML code:
<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<a href="index.html">
<div id="logo">
</div>
</a>
<div id="welcome">
<h1>Welcome</h1>
<h2>
To
<span class="gold"> Promise Land Partners</span></h2>
</div>
<div id="bottom_bar">
</div>
</div>
</body>
</html>
This is my CSS code:
body {
background-image: url(img/dot.png), url(img/background.jpg);
background-repeat: repeat, no-repeat;
background-position: top left, center center fixed;
background-size: auto, cover;;
margin: 0px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#logo {
background-image:url(img/PLP.png);
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
}
#logo:hover, #logo:active {
background-image:url(img/PLP_pushed.png);
}
#bottom_bar {
background-image:url(img/bottom_bar.jpg);
position: fixed;
bottom: 0;
height: 27px;
width: 100%;
}
#welcome {
background-image: url(img/welcomepanel.png);
background-repeat: no-repeat;
position: relative;
left: 0;
top: 70px;
height: 261px;
width: 100%;
padding: 10px;
margin: 0;
}
h1 {
color:white;
padding-left: 90px;
font-size: 6em;
margin: 0;
}
h2 {
color: white;
font-size: 4em;
padding-left: 20px;
margin: 0;
}
.gold {
color: #ee9f00;
font-size: .75em;
margin: 0;
}