Image displays larger than the dimensions set in CSS

Question

I have set up a webshop with a product list. Each product is composed of an image, an add to cart button and a selector. For some reason the images are taken up a large part of the screen, more than the properties I have given them. This is my CSS:

  * {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: normal;
      text-decoration: none;
      color: #e3e5e8;
    }

    body {
      background: black;
      max-height: 100%;
    }

    #Menu {
      background-color: black;
      color: white;
      max-width: 100%;
      text-align: center;
      font-size: 30px;
      position: relative;
      top:50%;
      word-spacing: 150px;
    }

    #Menu img{
      position: relative;

      right: 200px;
      margin-left: 5px;
      height: 200px;
      width: 200px;
    }

    #Menu:link{
      text-decoration: none;
      margin: 50px;
    }

    #Home {
      background-color: black;
      height: 300px;
    }

    #Webshop {
      background-color: black;
      height: 100%;
      width: 100%;
    }

    .Info {
      max-width: 100%;
      max-height: 20%;
      padding: 40px;
      margin: 0 auto;
      position: fixed;
      bottom: 0px;
    }

    hr {
      border: 0;
      margin: 20px 0;
    }

    #Productlist {
      list-style-type: none;
      position: relative;
      display: inline-block;
      margin-top: 100px;
      height: 50px;
      width: 50px;
    }

    #Product img {
      width: 350px;
      height: 400px;
      display: inline-block;
      position: relative;
      left: 50px;
      margin-top: 100px;
    }

    #Productlist:hover img {
      opacity: 0.5;
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
    } 

    #Product:hover img {
      opacity: 1;
    }

    #Webshop button {
      background-color: #141516;
      position: relative;
      right: 134px;
      display: inline-block;
      z-index: 1;
      padding: 15px 45px;
      line-height: 1.8;
      text-align: center;
      text-transform: uppercase;
      font-size: 0.8rem;
      font-weight: 600;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      border: 3px solid white;
    }

    #Webshop button a {
      position: relative;
      padding: 0px;
      text-align: center;
      text-transform: uppercase;
      color: #888888;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 60px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
    }

    #Webshop button:hover a {
      color: red;
      z-index: 1000;
    }

    #Webshop button:hover {
      color: black;
      background-color: white;
      border: 1px solid white;
    }

    #size {
      display: inline-block;
      z-index: 1;
      color: white;
      position: relative;
      right: 484px;
      border: 3px solid white;
      width: 120px;
      height: 40px;
      border-radius: 3px;
      overflow: hidden;
      background: #141516 no-repeat 90% 50%;
    }

    #size:focus {
      outline: none;
    }

I'm using React and this is how my component render looks like:

  render() {
        return (
            <div className='Webshop' id='Webshop'>
                <li id="Productlist">
                    <div className='Product'>
                      <img src={Seltzshirt}></img>
                      <button onClick={this.handleClick} className="addit">Add to cart</button>
                      <select id="size" onChange={this.change} value={this.state.value}>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        <option value="x-large">X-large</option>
                      </select>
                    </div>
                    <div className='Product'>  
                      <img src={Seltzshirt}></img>
                      <button onClick={this.handleClick} className="addit">Add to cart</button>
                      <select id="size" onChange={this.change} value={this.state.value}>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        <option value="x-large">X-large</option>
                      </select>
                    </div>
                </li>
            </div>
        );
    }

Is this problem with my CSS? Could it be an issue on my side because I'm using Webpack Dev Server to preview my page?

Answer 1

You aren't using the correct css selectors in every case. In your css use # to target id and use . to target class or in jsx className .

Eg Use .Product img instead of #Product img

You seem to exclusively try and target ids, but most of your selectors are classes.