Удаление черной полосы между элементами div и предоставление им общего фонового изображения

Question

Я пытаюсь создать сайт о погоде. В теле у меня есть div для моей панели поиска, а затем div под ним для основной области с информацией о погоде. Проблема в том, что между ними есть разделитель (под областью поиска и над основной областью). Как мне избавиться от этого? Я пробовал поля, но не могу понять, чего мне не хватает.

Кроме того, я пытаюсь заставить эти два div'а разделить одно фоновое изображение

Заранее спасибо

<div class="searchArea">
  <ul>
  <li><div><input type="text" id="search_term" placeholder="Other Location ..."></div></li>
  <li><div><input type="submit" value="Check Weather" onclick="findNewWeather()" /></div></li>    
  </ul>
  </div>

  <div class="mainArea">
    <h1>City Name</h1>
    <ul>
        <li>
            <div>
                <h1>Current</h1>
                <img src="http://openweathermap.org/img/wn/10d@2x.png" alt="today icon">
                <h2>12oC</h2>
                <h3>Feels: 9oC</h3>
                <h3>Mostly Sunny</h3>

ETC ....

.weatherMain {
  margin-top: 1px;
  background-image: url("./WP.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  color: gray;
  padding: 25px0px;
  display: flex;
  flex-direction: row;
  height: 600px;
  font-family: poiret one;
  font-size: 35px;
  color: yellow;
  font-weight: bold;
}
.searchArea {
  background-image: url("./banff.jpg");
  background-position: 0 -75;
  height: 50px;
  margin-bottom: 1px;
}

Answer 1

Учитывая код, который вы разместили выше, я думаю, что проблема в том, что ваши теги <ul> и <h1> имеют свои собственные поля, которые раздвигают ваши теги <div>.

Это должно решить проблему :

.searchArea ul {
  margin-bottom: 0;
}
.weatherMain h1 { // or .mainArea h1, your example has both
  margin-top: 0;
}

Чтобы дать им один фон, я бы рекомендовал обернуть их в <div> и применить к ним фоновое изображение.