I'm trying to position the pencil directly below the word "blah", but it seems like margin-top is not working as expected...
Additionally, I'm struggling with making sure that the pencil stays aligned below "blah" regardless of the screen size. I've heard that using percentages can help with this issue – is that true?
Here is the HTML snippet:
<head>
<h1>Blah Pencil</h1>
<img src="http://www.pngall.com/wp-content/uploads/2016/03/Pencil-PNG-Pic.png" id="pencil" height="5%" width="20%">
</head>
<link rel="stylesheet" type="text/css" href="pencil.css">
<link href="https://fonts.googleapis.com/css?family=Fugaz+One|Roboto" rel="stylesheet">
<body>
</body>
</html>
And here is the CSS code:
h1 {
text-align: center;
font-family: 'Fugaz One', cursive;
font-size: 590%;
}
body {
background-image: url(https://www.xmple.com/wallpaper/graph-paper-grid-white-blue-1920x1080-c2-fdf5e6-1e90ff-l2-2-54-a-0-f-20.svg);
}
#pencil {
display: inline-block;
margin-top: 21px;
}