After creating a container with a panel and a panel body, everything looked fine when viewed on desktop. However, upon checking it on my phone, I noticed a large space on the right with nothing there.
If you'd like to see an image of the issue, click here.
For a closer look at the code, visit this link.
I'm seeking advice on how to address this issue. I experimented with setting container-fluid but wasn't satisfied with how it displayed on desktop. I'm not certain if container-fluid would resolve the problem either. Any tips or suggestions on fixing this issue are greatly appreciated. Additionally, I'm open to making changes to the layout of my article page. As this is my first time creating an article page, any guidance would be valuable.
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>
NFL Tutorial <small>Posted on January 25th</small>
</h3>
<div class="fb-like" data-href="https://google.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div>
<ul>
<li>
<p>
<h4>
<b>1. Football is an 11 vs 11 sp