How can customized CSS on WordPress highlight the blog title in white when it's not intended?

Question

I put some additional CSS to my WordPress, and it affected the main page in a way that I didn't intend.

The below is all the CSS code that I added,

h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

h2 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

h3 {
  position: relative;
  background: #f1f8ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}

h3:before {
  font-family: "Font Awesome 5 Free";
 /* content: "\f303"; */
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: normal;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#toc_container {
  background: #f9f9f9;
  border: 1px solid #aaa;
    padding-right: 8px;
    padding-left: 8px;
  /* padding: 10px;
  margin-bottom: 1em; */
  width: auto;
  display: table;
  font-size: 95%;
  /* margin-right: 15px; */
}

#L_size{
    font-size: 150%;
}

#XL_size{
    font-size:200%;
}

#akamoji{
    color: red;
}

#aomoji{
    color: blue;
}

#chamoji{
    color: brown; 
}

#haikei_kiiro{
    background-color: yellow;
}

#haikei_sorairo{
    background-color: lightblue;
}

, and the attached are before and after the CSS was added (notice that the blog title "SONOTAさんの北欧通信" is highlighted in white, which is not what I intended.

how can this be happening?

Answer 1

the code you added affect the general elements of the page the H1 ,H2 ,H3

for example from the first part of the code

h1 {
  padding: 0.5em;
  color: #010101;
  background: #eaf3ff; /*this give the light blue back ground*/
  border-bottom: solid 3px #516ab6; /*and this gives the border under it*/
}

remove the two lines I pointed and background and border will disappear .

other than this try to use clear classes and keep the # for the clear sectors