Obsidian html tag

Custom CSS & Theme Design
1

What I’m trying to do

I’m trying to insert html tags into markdown use css. Code below:

:root {
  --cue-space: 20%;
  --cue-line: 1px solid lightgrey;
}

.markdown-preview-view.side-note .cm-contentContainer,
.markdown-source-view.side-note .cm-sizer,
.markdown-preview-view.side-note .markdown-preview-sizer {
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto auto;
  width: 100%;
}

/* divs under preview-sizer */
.markdown-preview-view.side-note
  .markdown-preview-sizer
  > div:not(.mod-header):not(.mod-footer),
.markdown-source-view.side-note .cm-content {
  max-width: var(--max-width);
  width: var(--line-width);
  margin-left: var(--cue-space);
  /* border-left: var(--cue-line); */
  /* padding-left: 20px; */
}

/* .markdown-source-view.side-note .cm-content { */
/*   border-left: var(--cue-line); */
/*   padding-left: 20px; */
/* } */

.markdown-source-view.side-note .internal-embed,
.markdown-source-view.side-note .cm-callout,
.markdown-source-view.side-note .HyperMD-codeblock ,
.markdown-source-view.side-note .cm-line,
.markdown-preview-view.side-note
  .markdown-preview-sizer
  /* .markdown-preview-sizer */
  /* > div:has(p, ul, ol, pre, table) { */
  > div {
  border-left: var(--cue-line);
  padding-left: 20px;
}

.markdown-source-view.side-note .cm-html-embed:has(aside),
.markdown-preview-view.side-note aside {
  font-style: italic;
  font-family: var(--font-text);
  font-size: var(--font-adaptive-normal);
  font-weight: var(--normal-weight);
  line-height: var(--line-height);

  padding: 0px 8px 0px 0px;
  margin-right: 10px;
  position: absolute;
  left: 1%;
  max-width: var(--cue-space);
}

.markdown-preview-view.side-note summary,
.markdown-source-view.side-note summary {
  display: none;
}

I need extra spacing around this tag so all other file can be rendered correctly.
Is this a default behaviour and can not be avoided? Or is it css files that is causing the problems?

Thanks