Почему у меня есть две границы вокруг моего контента?

Question

Почему у моего контента две красные рамки?

Вот изображение того, как код выглядит рядом с результатом:

Вот код, который я использую для создания контента.

  * {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: #0000ff;
  margin: 25px auto;
  width: 1140px;
  height: 400px;
  float: left;
  color: white;
}

#first {
  border: 1px solid #ff0000;
  width: 300px;
  color: red;
  background-color: black;
  padding: 10px;
  margin: 5px;
}

#notes-example {
  border: 1px #ff0000 solid;
  padding: 25px;

<div id="notes-example">
  <ol id="notes-example">
    <h2 id="first">Example of how the notes will be laid out</h2><br>
    <h3>Heading</h3>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis totam, blanditiis quibusdam suscipit in, omnis quo consequuntur porro sint reprehenderit necessitatibus ipsam? Beatae ea numquam, ducimus nostrum est id officiis.</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores optio eos sequi, laudantium culpa quaerat perspiciatis laborum sed eaque reiciendis quam alias in corporis, odio omnis temporibus hic aliquid aliquam!</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi placeat blanditiis, animi sequi. Vel, fuga architecto repellendus incidunt provident sapiente vitae. Perspiciatis id nisi maxime, nemo alias quo? Rem, accusamus!</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tenetur corrupti cupiditate delectus eos autem quae tempore inventore iusto aliquam hic optio magnam quibusdam labore obcaecati eius, fugit vel esse.</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus eaque, placeat, labore illum commodi atque dignissimos beatae doloremque corrupti dolor accusantium. Inventore temporibus unde saepe aperiam, amet consequatur velit?</li><br>
  </ol>
</div>

Спасибо за вашу помощь.

Вот обновленное видео об удалении свойства border из # notes-example в соответствии с предложением https://imgur.com/qfzweDW

Answer 1

Вы вызываете note-example дважды, что приводит к тому, что граница применяется дважды.

Либо вызовите ее только один раз, либо вы можете переименовать один из элементов div, чтобы применить стиль без рамки.

Для вас, я думаю, это то, что вам нужно в HTML-коде.В противном случае просто добавьте новое имя идентификатора div (например, notes-example2) и поместите его в CSS с отступом, но не границей.

<div>
<ol id="notes-example">
<h2 id="first">Example of how the notes will be laid out</h2><br>
<h3>Heading</h3> 
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis totam, blanditiis quibusdam suscipit in, omnis quo consequuntur porro sint reprehenderit necessitatibus ipsam? Beatae ea numquam, ducimus nostrum est id officiis.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores optio eos sequi, laudantium culpa quaerat perspiciatis laborum sed eaque reiciendis quam alias in corporis, odio omnis temporibus hic aliquid aliquam!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi placeat blanditiis, animi sequi. Vel, fuga architecto repellendus incidunt provident sapiente vitae. Perspiciatis id nisi maxime, nemo alias quo? Rem, accusamus!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tenetur corrupti cupiditate delectus eos autem quae tempore inventore iusto aliquam hic optio magnam quibusdam labore obcaecati eius, fugit vel esse.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus eaque, placeat, labore illum commodi atque dignissimos beatae doloremque corrupti dolor accusantium. Inventore temporibus unde saepe aperiam, amet consequatur velit?</li><br>
</ol>
</div>

Answer 2

Проверьте этот фрагмент.удалить границу и идентификатор из div

    * {
			padding:0px;
			margin:0px;
		}
		body {
			background-color:#0000ff;
			margin: 25px auto;
			width:1140px;
			height:400px;
			float:left;
			color:white;
		}
		#first {
			border:1px solid #ff0000;
			width:300px;
			color:red;
			background-color:black;
			padding:10px;
			margin:5px;
		}
		#notes-example {
			padding:25px;
border:1px solid #ff0000;}

<div>
<ol id="notes-example">
<h2 id="first">Example of how the notes will be laid out</h2><br>
<h3>Heading</h3> 
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis totam, blanditiis quibusdam suscipit in, omnis quo consequuntur porro sint reprehenderit necessitatibus ipsam? Beatae ea numquam, ducimus nostrum est id officiis.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores optio eos sequi, laudantium culpa quaerat perspiciatis laborum sed eaque reiciendis quam alias in corporis, odio omnis temporibus hic aliquid aliquam!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi placeat blanditiis, animi sequi. Vel, fuga architecto repellendus incidunt provident sapiente vitae. Perspiciatis id nisi maxime, nemo alias quo? Rem, accusamus!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tenetur corrupti cupiditate delectus eos autem quae tempore inventore iusto aliquam hic optio magnam quibusdam labore obcaecati eius, fugit vel esse.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus eaque, placeat, labore illum commodi atque dignissimos beatae doloremque corrupti dolor accusantium. Inventore temporibus unde saepe aperiam, amet consequatur velit?</li><br>
</ol>
</div>

Answer 3

Вы дали идентификатор "notes-example" на 2 элемента."заметки-пример

Answer 4

ПРОБЛЕМА РЕШЕНА. Мне нужно было переименовать один из моих идентификаторов во что-то другое, так как два из них были названы id = "notes-example"

Спасибо за помощь.