Can't center images consistently

Can't center images consistently
0.0 0

#1

Sometimes when I try to center an image with

display: block;
margin: auto;

it’ll work, but then sometimes it wont. I just recently started learning to code so I’m not really sure where I’m going wrong. Can someone take a look at fake site I’m practicing on and tell me what’s going on?

<!DOCTYPE html>
  <html>
    <head>
      <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"/> 
      <link href="style.css" rel="stylesheet" type="text/css"/>
        <title>The Aloha Cookie Company</title>
    </head>
    <body>

    <div class="container">
      
        <div class="header">
          <img src="logo.gif">
         </div>

        <div id="products">
          <ol>
            <li>Products</li>
            <li>Location</li>
            <li>Order Online</li>
            <li>Gifts</li>



        <div class=promotions> 
        <h2>Hawaiian Flavors</h2>
          <ul>
             <li><img src="cookie 1.jpg">
             <figcaption> Cookie 1 </figcaption></li>

             <li><img src="cookie 2.jpg">
             <figcaption>Cookie 2</figcaption>

             <li><img src="Cookie 3.jpg"> 
             <figcaption>Cookie 3</figcaption>

        </div>
      
      <div class="mission statement">
        <p>Here at Big Island Candies, we only use the highest grade of ingredients. We proudly feature only freshly roasted Big Island macadamia nuts and 100 percent pure Kona and Ka‘u coffee from farms here on Hawaii Island. There is no substitute for quality, and no shortcuts are ever taken here. We take great care to ensure that our products reach our customers in the best condition possible. See below to learn more about our shipping process.</p>

        <img src="map.png"/>

    </body>
    </div>
  </html>

And then the CSS stylesheet I linked it to is:

.contain{
	min-width: 500px;
	max-width: 1024px;
}

.header {
	display: block;
	margin= auto;
	

The image I’m trying to center is in <div class="header">


#2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.


#3

Try this instead

.header img {
  display: block;
  margin: auto;
}