Is There Any Way To Delete Those Space Between The 2 Column?

Hope you're all well. While I'm sick with this coronavirus, I'm trying to improve my web skills. I'm trying to make a 2 column table with only span/li/ul. Here is my code : You ca

Solution 1:

Remove the fixed width from li and use white-space:nowrap instead then add text-md-end to your first columns to avoid the gap

body {
   background-color: #FEFAF6;
   font-family: 'Segoe UI Regular';
   font-size: 14px;
}

.fa-star {
   color : #154360;
}

.all_star {
   margin-left: 30px;
   white-space:nowrap;
}

li {
   list-style-type: none;
   display:inline-block;
}

li:hover {
   background-color: red;
}

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"crossorigin="anonymous"><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"crossorigin="anonymous"><divclass="container"><divclass="row"><divclass="col-md-6 text-md-end"><ul><li><spanclass="">1bcdeqgsterudisoqpardbfhert</span><spanclass="all_star"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></li></ul></div><divclass="col-md-6"><ul><li><spanclass="">2bcdeqgsterudisoqpardbfhert</span><spanclass="all_star"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></li></ul></div></div><divclass="row"><divclass="col-md-6 text-md-end"><ul><li><spanclass="">3Abcdeqgsterudisoqpardbfher</span><spanclass="all_star"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></li></ul></div><divclass="col-md-6"><ul><li><spanclass="">4Abcdeqgsterudisoqpardbfher</span><spanclass="all_star"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></li></ul></div></div><divclass="row"><divclass="col-md-6 text-md-end"><ul><li><spanclass="">5Abcdeqgsterudisoqpardbfher</span><spanclass="all_star"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></li></ul></div><divclass="col-md-6"><ul><li><spanclass="">6bcdeqgsterudisoqpardbfhert</span><spanclass="all_star"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></li></ul></div></div></div>

Solution 2:

1. The weird indentation of last row occured because you forgot to close one <div> tag. Use HTML validators to find these kinds of errors: https://validator.w3.org/#validate_by_input You can just copy-paste code and click "Check" button.

2. To have super responsive control over elements, I would apply nested Grid behavior. Here is an example of single row code:

<divclass="row"><divclass="col-md-6"><divclass="row"><divclass="col-md-6">1bcdeqgsterudisoqpardbfhert</div><divclass="col-md-6"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></div></div></div><divclass="col-md-6"><divclass="row"><spanclass="col-md-6">2bcdeqgsterudisoqpardbfhert</span><spanclass="col-md-6"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></div></div></div>

EDIT: example of three column solution:

<divclass="row"><divclass="col-md-4"><divclass="row"><divclass="col-md-6">1bcdeqgsterudisoqpardbfhert</div><divclass="col-md-6"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></div></div></div><divclass="col-md-4"></div><divclass="col-md-4"><divclass="row"><spanclass="col-md-6">2bcdeqgsterudisoqpardbfhert</span><spanclass="col-md-6"><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span><spanclass="fas fa-star"></span></span></div></div></div>