CODEWITHSUNDEEP
htmlcss
ELAPIDAE
ELAPIDAE

Reputation: 3

My image doesn't show up at the top of website, issue with aligning?

Here's the screenshot of my issue: https://i.sstatic.net/kSVQj.png, as you can see here, the quote doesn't align to the top of the website, and I don't know why it happens. Any solutions? Here's the code:

<body>
<div id="container">
  <div id="header"> <img src="media/images/logo.png"> </div>

  <div style="background: #000; width: 440px; height: 344px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); text-align: justify; display: inline-block;"> <img src="media/images/covers/comingsoon.png"></div> <!-- YOUTUBE -->

  <div style="background: #000; width: 410px; height: 125px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); text-align: justify; display: inline-block;"><h1 style="margin: 10px;">"The sky above the port was the color of television, tuned to a dead channel."</h1></div> <!-- QUOTE -->

  <div style="background: #000; width: 405px; height: 125px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); display: inline-block;"> <a href="http://breathlessrpg.com/"> <img width="400px" src="media/images/covers/breathless.png"> </a> </div> <!-- BREATHLESS -->

  <div style="background: #000; width: 405px; height: 125px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); display: inline-block;"> <a href="http://breathlessrpg.com/"> <img width="400px" src="media/images/covers/breathless.png"> </a> </div> <!-- BREATHLESS -->

  <div style="background: #000 url(http://38.media.tumblr.com/c24cbbf9efaed9992839b7feca83f9be/tumblr_nlzqeuNbDp1slaspwo2_500.gif); width: 860px; height: 212px; text-align: center; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.95); margin: 0px auto;"><img src="media/images/covers/secret.png"></div> <!-- SECRET_SOCIETY -->

</div>
</body>

I want the quote to be right next to comingsoon.png box, and then the rest of images below.

Upvotes: 0

Views: 40

Answers (1)

sbeliv01
sbeliv01

Reputation: 11840

It's likely that the browser's default margin or padding, usually around 16px, has not been overwritten.

Try adding the below to your CSS:

html,body {
    margin: 0;
    padding: 0;
}

Upvotes: 1

Related Questions