間隔を開けると縦並びになってしまう

お世話になっております。
現在、カラオケの曲登録アプリを作成しております。

liタグを横並びにし、margni-leftで間隔を開けようとすると縦並びに戻ってしまいます。

また、floatをしても横並びにならなかったのが、ulタグにwidth100%を付与した所、たまたま横並びになりました。
理由が分かりませんので教えていただきたいです。

main.html.haml

Ruby
1.main
2  .table-responsive
3    %table.chart
4      %thead
5        %tr
6          %th アーティスト
7          %th タイトル
8          %th レベル
9      %tbody
10        - @songs.each do |song|
11          %tr
12            %td
13              = song.artist
14            %td
15              = song.title
16            %td
17              = song.level_i18n
18            %td
19              %span=image_tag 'arrow_top.png'
20              %ul
21                %li= link_to '編集', "/songs/#{song.id}/edit"
22                %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか？' }

main.scss

Ruby
1.main {
2  height: calc(100vh - 100px - 30px);
3  background-color:   #808080;
4  overflow: auto;
5  .table-responsive {
6    color: #fff;
7    padding: 50px;
8    font-size: 20px;
9    .chart {
10      width: 60%;
11      margin: 0 auto;
12      position: relative;
13      thead {
14        border-bottom: 2px dashed #87CEFA;
15      }
16      tbody {
17        tr {
18          border-bottom: 2px dashed #87CEFA;
19          height: 10vh;
20          span {
21          }
22          :hover ul{
23            display: block;
24            position: absolute;
25            
26          }
27          ul {
28            width: 100%;
29            display: none;
30            li {
31              text-align: center;
32              float: left;
33              margin-top: 10px;
34              background-color: #f7f7f7; 
35              border-left: 1px solid #d8d8d8;
36              border-right: 1px solid #d8d8d8;
37              box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
38              border-radius: 4px;
39              a {
40                text-decoration: none;
41                color: #666666;
42              }
43            }
44          }
45        }
46      }
47    }
48  }
49  .registration {
50    .form-group {
51      margin: 0 auto;
52      width: 800px;
53      display: flex;
54      flex-direction: column;
55      padding-top: 80px;
56      .form-title {
57        font-size: 20px;
58        margin-top: 10px;
59      }
60      .form-control {
61        margin-top: 5px;
62      }
63      .btn-primary {
64        margin-top: 50px;
65      }
66    }
67  }
68}