html5 - using heading tags moves div downwards -
i'm trying build header personal cv site, , reason using heading tags <h2></h2> <h3></h3>
moves parent div .header
downwards. when try move headings using margin-top moves whole div again. using normalize.css (tried removing nothing changed) along google font chose. otherwise code posted in fiddle below. can explain why happening , how fix it? thanks.
html:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>miha Šušteršič</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=ubuntu:400,500,700&subset=latin-ext' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="header"> <h2> miha Šušteršič </h2> <h3> web developer </h3> </div> </header> <section id="menu"> </section> <section id="skills"> </section> <section id="porfolio"> </section> <footer> </footer> </body> </html>
css:
/******************************************** sploŠno ********************************************/ body { font-family: 'ubuntu', sans-serif; line-height: 120%; margin: 0; } /******************************************** header ********************************************/ .header { width: 100%; background: linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) ), url("../images/header.jpg"); background-repeat: no-repeat; } .header h2 { color: #ffffff; font-size: 3em; } .header h3 { color: #eaf1fb; } /******************************************** tablet adjustments ********************************************/ @media screen , (min-width: 480px) { body { background-color: lightblue; } }
change margin
on header tags in css:
.header h2, .header h3 { margin-top: 0; }
Comments
Post a Comment