Wordpress custom html is different in draft and view mode

Question

Recently, I started learning a little bit of CSS/HTML for Wordpress. My idea is that I want to create a box where I can put some summarized information about a topic in blogposts. After some long hours trying to learn, I could reach a good place.

I put the custom html in wordpress, then visualize it and it's all good, exactly as expected. (https://prnt.sc/-dDl6k6ZVt4U). But when I changed to View mode to see how it would look like for a reader, it was different (https://prnt.sc/adViCbTV1WHR). How can I solve it?

This is the code I'm using, I'd be grateful if someone is able to help me. Thanks!

.erk-rich-text ol>li {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1,5em;
    margin-top: 0em;
    margin-bottom: 1em;
    position: relative;
    background-color: ;
    font-family: 'Open Sans';
}

ol {
  background: ;
  padding: 30px;
  margin-bottom: 0em;
  margin-block-end: 0em;
}

.p-snippet {

  background: ;
  padding: 20px;
  margin-bottom: 0em;
  margin-block-end: 0em;
  font-family: 'Open Sans';
  font-size: 1.2rem;
  margin-top: 5px;
  margin-bottom: 0px;
 
}

.snippet-h2 {
  background: white !important;
  background-color: lightgrey!important;
  padding: 5px;
  font-family: 'Open Sans';
  margin-block-start: 4em;
  margin-block-end: 2em;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
  border-style: solid; 
  border: 2px solid black;
  border-radius: 5px;
  font-size: 1rem;
  font-position: left;
  border-radius: 25px;
  text-indent: 50px;

}

.erk-block-snippet {
    padding: 2rem 2rem;
    background: ;
    margin-block-start: 1em;
    margin-block-end: 3em;
    border-radius: 35px;
    border: 2px solid black;
    border-radius: 55px;

}

body {
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

</style>

<p>
    </p><div class="erk-block-snippet">
        <div class="erk-rich-text ol>li">
            <div class="snippet-h2">
                    <h2> Quais são alguns dos tipos de nootrópicos? </h2> <!-- Esse é o título do bloco, altere de acordo-->
                </div class="snippet-h2">
            <ol>
                <li> Cafeína </li>
                <li> L-tianina</li>
                <li> Noopept </li>
                <li> Ginkgo Biloba </li>
                <li> Ginseng </li>
                        <li> Creatina </li>
                        <li> Rhodiola Rosea </li>
            </ol>
        </div class="erk-rich-text ol>li">
    </div class="erk-block-snippet">
<p></p>´´´