How do I make contents in HTML by using css

I’m trying to make overlaywindow by using html.
but I cannot make item in HTML element such as table.
I tried to use margin syntax but it’s not working
The result is showing like this
There is table in left side of html element

HTML Element:

var h3 = document.createElement('h3')
          var infoTitle = document.createTextNode('열수송관정보')
          h3.appendChild(infoTitle)
          cwContent.appendChild(h3)

          var cwTable = document.createElement('table')
          cwTable.className = 'infoTable'

          row = cwTable.insertRow(0)
          column = row.insertCell(0)
          column.innerHTML = '시공일자'
          column = row.insertCell(1)
          column.innerHTML = '2020-10-29'

          row = cwTable.insertRow(1)
          column = row.insertCell(0)
          column.innerHTML = '매설지역'
          column = row.insertCell(1)
          column.innerHTML = '성동구'

          row = cwTable.insertRow(2)
          column = row.insertCell(0)
          column.innerHTML = '등급'
          column = row.insertCell(1)
          column.innerHTML = 'A'

          row = cwTable.insertRow(3)
          column = row.insertCell(0)
          column.innerHTML = '길이'
          column = row.insertCell(1)
          column.innerHTML = '50m'

          row = cwTable.insertRow(4)
          column = row.insertCell(0)
          column.innerHTML = '직경'
          column = row.insertCell(1)
          column.innerHTML = '40A'

          cwContent.appendChild(cwTable)

style:

<style lang="scss">
.overlayBox {
  border-radius: 5px;
  text-align: center;
  border: 1px solid #333333;
  .infoTable .infoManholeTable .infoPipeStatusTable .infoPipeStatusTable {
    text-align: center;
    width: 100%;
    border: 1px solid #333333;
    border-collapse: collapse;
  }
  td {
        border: 1px solid #333333;
        border-collapse: collapse;
      }
}

</style>