Need to resize the banner to fit the CSS window

Question

I am trying to correctly configure the logo / banner of the site. Unfortunately, it is displayed in different widths at different computer resolutions and window sizes.

This also happens with my banner ad in the content field.

CSS

#logo {
    max-width: 100%;
    height: auto;
    width: auto; 
}

HTML

<div id="logo">
    <center>
        <img src="logo.png" alt="Image of Traffic Monsoon">
    </center>
</div>

The website is here.

Answer 1

<center>out of date, so do not use .

To fix your problem, you need to target imgnot todiv

use margin:autoand display:blockto center image instead of outdatedcenter

#logo img {
  max-width: 100%;
  height: auto;
  width: auto;
  margin:auto;
  display:block
}

<div id="logo">
  <a>
    <img src="http://clubtrafficmonsoon.com/banner.gif" alt="Image of Traffic Monsoon">
  </a>
</div>

Run codeHide result

, :

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

Answer 2

, <img>, text-align:center; :

#logo {
  text-align: center;
}

<div id="logo">
  <img src="logo.png" alt="Image of Traffic Monsoon">
</div>

Hide result

, <center>, . , , , :

#logo img {
  max-width: 100%;
  height: auto;
}

Answer 3

<main> wrapper. max-width , width:100%.

Answer 4

, :

div.

<div class="wrapper">your code here</div>

css :

.wrapper {
    margin: 0 auto;
    width: 1574px;
}

#logo {
    margin: 0 auto;
    text-align: center;
    width: 1331px;
}

#logo img{
    text-align: center;
    width: 96%;
}