Введите фоновое изображение в сетку, используя HTML и CSS

Question

Я пытаюсь поместить Фоновое изображение в одну из моих колонок, но оно не показывает, что я пытался его растянуть, но выглядит не очень хорошо.я не знаю, чего не хватает или есть код, который не должен быть там.Я посмотрел на каждом форуме, но нет конкретного ответа или вопроса, который связан с моей проблемой.

    body {
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: 10vw 50vw 50vw 50vw 50vw 7vw;
      grid-gap: .5em;
      margin: 0;
      padding: 0;

      
    }

    header,
    footer {
      grid-column: 1 / span 2;
    }

    main {
      grid-column: 1 / span 2;
      grid-column: 1 / span 2;
      grid-column: 1 / span 2;
      grid-column: 1 / span 2;
      
    }

    #main1 {
    	background: url("Pics&Video/Sea.jpg") no-repeat center;
    	background-size: contain;
    	
    	
    }


    body {
      margin: 0 auto;
      max-width: 80em;
      padding: 1em 0;
    }

    header,
    main,
    aside,
    footer {
      background: #eaeaea;
      display: flex;
      align-items: center;
      justify-content: center;
    }

<header>
    		Header
    	</header>
    	
    	<main class="main1"> 
    		Main
    	</main >
    	<main class="main2">
    		main
    	</main>
    	<main class="main3">
    		Main
    	</main>
    	<main class="main4">
    		main
    	</main>

    	<footer>
    		Footer
    	</footer>

Sea.jpg

Answer 1

В HTML вы используете class = "main2" и в CSS вы используете #.Вы должны перейти на css .main1 {}