Having trouble getting my image to appear at the top of the website, could it be an alignment issue?

Here is a screenshot showing the issue: https://i.stack.imgur.com/kSVQj.png. The quote on my website does not align to the top as expected. Can anyone provide a solution for this? Below is the corresponding 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 am looking to have the quote positioned adjacent to the comingsoon.png box and the other images located below it.

htmlcss

Answer №1

One possible reason for the issue could be the browser's default margin or padding settings, typically set to around 16px.

To resolve this, consider including the following CSS in your code:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...

cssreactjsmaterial-ui

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

Bootstrap - the input group button is designed to align to the right side

Currently, I am in the process of constructing a navigation bar for a website that includes a search bar and a grouped button. Everything functions properly when viewed on a desktop, but as soon as I switch to mobile view and the collapsible menu is activa ...

htmlcsstwitter-bootstrap

Issue with MaterializeCSS: Unable to add new options to select menu

I have a function that appends options to a dropdown based on the onchange event. The options are being appended successfully, but they are not visible when clicking the dropdown. $(document).ready(function(){ $('select').formSelect(); }) ...

jqueryhtmlmaterialize

Steps to deactivate a textarea in angularjs based on a selected option's value meeting a specific condition

Hello, I am a newcomer to AngularJS and I am looking to disable the textarea when a specific option is selected from a dropdown menu. I attempted to use ng-disabled="(here my ng-model value)" but unfortunately, it did not work as expected. If creating a ...

htmlangularjs

Fill your HTML form effortlessly using data from Google Sheets

I am relatively new to this topic, but I'm seeking a solution to populate an Apps Script Web App HTML dropdown form with names directly from a Google Spreadsheet. At the moment, I've managed to retrieve an array of names from column A in my sprea ...

javascriptjqueryhtmlgoogle-apps-script

What's the best way to place my image inside a Bootstrap Accordion so that it is housed within the accordion-item?

I've been facing an issue with a Bootstrap Accordion. Everything works fine, except when I try to insert an image <img src="https://placehold.co/600x400" class="img-fluid" /> into an accordion-item <div class="accord ...

htmlcssbootstrap-5accordionbootstrap-accordion

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

javascripthtmlangulartypescriptbootstrap-modal

Browser fails to display input value when altered

I have noticed that when the value of the Input element changes, the browser does not display the updated value. However, you can verify this change by inspecting the DevTools in the browser. I am curious as to why the actual value of the Input element is ...

javascripthtmlreactjsnext.js

Using CSS for hover transitions can be glitchy in Safari, especially when trying to keep images centered

After seeing an example on Design Shack, I was inspired to create linkable photos that zoom in slightly when hovered over. To achieve the desired centered animation effect, I had to tweak the top, left, margin-top, and margin-left properties until it worke ...

csshovercss-transitions

Encountering a NullPointerException when transferring inputs from scala.html to Controller as a form in Play framework (version 2.8.*) using

I am currently developing a Java web application using the Play Framework (2.8.19). In the process of creating a registration page, I encountered an issue with passing inputs from the registration page written in Scala to the controller class that is respo ...

javahtmlpostgresqlplayframeworkplayframework-2.8

The background image in CSS fails to display when a relative path is utilized

Currently, I am working on a JavaFX project which has the following file structure (CEP serves as the root directory): CEP +img menu.jpg +src +css_files MainMenu.css The main objective is to set the background image from the img dir ...

cssjavafx

Modifying a div element upon the successful completion of an ajax/json request

Currently, I have a form on my webpage for creating a new album. Alongside this form, there is also a delete album form. After successfully creating an album, I want to automatically update the checkbox list in the delete album form with the details of the ...

phpjqueryhtmlajax

Do not open iframe links in a new window

Is it possible to manipulate the iframe so that links open inside the iframe window? I want the links clicked within the iframe to stay within the same window instead of opening in a new one. However, I have too many links to individually edit their code ...

javascripthtmliframe

Latest FF 35 showing alert for blank field in HTML5 email input box

My form includes an email input field with a default value. When the user focuses on the field, it clears out if the value matches the default one. Upon blurring the element, the default value is restored if the field remains empty. In Firefox 35, clickin ...

javascriptjqueryhtmlvalidationfirefox

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

When multiple checkboxes are selected by the user, corresponding form fields should appear based on the checkboxes. For example, if both flight and hotel checkboxes are checked, then the full name and last name fields should be displayed while other fields ...

javascripthtmlcss

Stop header background image from loading on mobile browsers by utilizing the <picture> tag

Is there a method to utilize the <picture> element in order to prevent a page from downloading an image when viewed on a mobile phone? I have a website that features a header image. Unfortunately, due to the site's functionality, using CSS (bac ...

htmlcssimage

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

Reduce the size of text using HTML and CSS

I'm currently working on replicating an image using HTML and CSS that will be placed beneath the avatar on a forum. Here is what I have managed to achieve so far: https://jsfiddle.net/J7VBV/220/ table.avatarStats { border-spacing: 0; border- ...

htmlcss

Problem with Loading Images in JSP

When trying to display an image on my jsp page using the code < img src="C:/NetBeanProject/images.jpg" alt="abc" width="42" height="42"/>, the image does not appear. Is there something incorrect with this code? ...

htmljspjakarta-ee