Изменение высоты линии без влияния на цвет фона

Question

Я сейчас работаю над первым тестом freecodecamp, поэтому мой вопрос, вероятно, глуп.Я хотел бы изменить высоту строки #titles на меньшую, сохраняя при этом цвет фона.Это, вероятно, элемент дисплея, но я не могу понять, что делать.Кроме того, я хотел бы избавиться от белой линии вокруг моего изображения, прямо перед границей ...

<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is 
there.
</div>
<div id="tribute-info">
<br>
<br>
   fgj
   </div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>

https://jsfiddle.net/deffciu/hrna0Lfs/ любая помощь приветствуется

Answer 1

Добавление следующих двух правил к #titles заставляет его работать:

#titles {
  display: block;
  background: #6C7E95;
  line-height: 5px;
  /* Add the below two rules */
  overflow: hidden;
  padding: 0 0 20px;
}

Вы получаете это:

Фрагмент

html, body {
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background: white;
}

#title2 {
  color: #052449;
  margin-bottom: 0px;
}

#titles {
  display: block;
  background: #6C7E95;
  line-height: 5px;
  /* Add the below two rules */
  overflow: hidden;
  padding: 0 0 20px;
}

#image {
  border: 8px solid #052449;
  border-radius: 50%;
  width: 500px;
  height: 375px;
  margin-top: 15px;
}

hr {
  border-color: #486282;
  margin-top:0px;
}

#img-caption {
  margin-top: 20px;
  font-style: italic;
  font-size: 25px;;
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<div id="main">
  <div id="titles">
  <h1 id="title">A tribute to Ocelote</h1>
  <h2 id="title2">The man who has done it all.</h2>
  </div>
  <hr>
  <div id="img-div">
    <img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
  <div id="img-caption"> A story of how far can one go, if only the desire is there.
       </div>
  <div id="tribute-info">
    <br>
    <br>
       fgj
       </div>
  <a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>

Для проблемы с белой границей это ваши body поля.Приведенный ниже код это исправит.

body {margin: 0;}