What am i doing wrong with this? I'm trying to centre align-CodePudding

What am i doing wrong with this? I'm trying to centre align the header image. It keeps aligning left. I'm also trying to get the profile pic below the header image to float over it so that about 30% of the bottom half is hanging off. I'm a beginner...

<html>
<head>
  <meta charset="UTF-8">
  <meta name="toy-story"
  content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Toy Story 4 style.css">
  <img id="#header" src="toy story 4.jpg">
  <img id="#profile" src="toy story profile pic.jpg">
  <title> Toy Story 4</title>
</head>

body {
  background-color : rgb(14, 173, 225);
  }
h1,h2,h3 {
  color  : rgb(161, 29, 0);
  margin : 0px auto;
  }
h1:hover, h2:hover, h3:hover, a:hover {
  color : rgb(255, 0, 0);
  }
.header {
  display      : block;
  width        : 100%;
  margin-left  : auto;
  margin-right : auto;
  margin-top   : 0px;
  }
.profile {
  display      : block;
  margin-left  : auto;
  margin-right : auto;
  width        : 500px;
  margin-top   : 10px;
  }
img {
  display : block;
  margin  : 0 px auto;
  }

<h1>Toy Story 4</h1>
<img src="" controls width="500">
<div>
  <h2>Synopsis</h2>
  <p>Woody, Buzz Lightyear and the rest of the gang embark on a road trip with Bonnie and a new toy named Forky. The adventurous journey turns into an unexpected reunion as Woody's slight detour leads him to his long-lost friend Bo Peep. As Woody and Bo
    discuss the old days, they soon start to realize that they're worlds apart when it comes to what they want from life as a toy.</p>
</div>
<div>
  <h2>Characters</h2>
  <h3>Woody</h3>
  <p>Played by Tom Hanks</p>
  <p>Woody is a smart, determined, and passionate man, and would do anything for his nearest and dearest friends. He considers his friends as family and he tries his best to keep them together at all times. Yet, he is a flawed character.</p>
</div>
<h3>Buzz Lightyear</h3>
<p>Played by Tim Allen</p>
<p>Buzz is a toy from a science fiction franchise of the same name. In his fictional backstory, Buzz is a universal space ranger from the Intergalactic Alliance and the captain of the Alliance's team. Buzz is trained in several forms of martial arts and
  is a highly skilled warrior in hand to hand combat.</p>
<h3>Forky</h3>
<p>Played by Tony Hale</p>
<p>Forky is a white plastic spork outfitted with a pair of different sized googly eyes; a mouth made out of blue plasticine; two halves of a popsicle stick for feet, stuck on with modelling clay; arms and hands made out of a red pipe cleaner; and a unibrow
  made out of red plasticine.</p>
<h3>Bo Peep</h3>
<p>Played by Annie Potts</p>
<p>"Little" Bo Peep is a character in the Toy Story franchise and a main character of the fourth film. She is a porcelain shepherdess figurine and Sheriff Woody's girlfriend in the films. Bo Peep and her sheep were originally adornments of Molly Davis' bedside
  lamp.</p>
<p>Top five countries where Toy Story 4 grossed the highest during opening week:</p>
<ol>
  <li>United States</li>
  <li>Canada</li>
  <li>Brazil</li>
  <li>India</li>
  <li>Nigeria</li>
</ol>
<!-- First Fieldset -->
<fieldset>
  <legend>Comments</legend>
  <div>
    <label for="comments">Leave a comment!</label>
    <input type="text" id="comments" name="comments" required />
  </div>
</fieldset>

I'm trying to get the image of the header to centre align. I googled videos and it still keeps aligning left

CodePudding user response：

Your images are not working properly for two reasons

1. You've added a hashtag in the id names

<img id="#header" src="toy story 4.jpg">

<img id="#profile" src="toy story profile pic.jpg">

Remove the hashtags from the html so it's id="header" and id="profile"

2. Your CSS has the elements listed as classes, instead of id.

.header { ... } .profile { ... }

In your CSS, change the elements to #header { ... } and #profile { ... }

CodePudding user response：

You can use flex box for horizontal center alignment

body {
display : flex;
justify-content : center
}