Why is the border style applied to my column being partially obscured?

I have borders around the left and right columns of my page (where the book images are). But to the left and right of the images, they are obscured as if the Hyperlinks/images have very wide margins or padding, but they don't.

Here is what I'm talking about (with a couple of the obscured portions of the borders circled):

You can see that there IS a piece of the border that displays on the sides of the borders between the images (above and below the images). It's as if an invisible part of the images are expanding their width to the left and right.

This is the html (and inline CSS) involved in these Hyperlinks

<div runat="server" class="col" style="border-style: solid;">
    <div class="row">
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Movie-        Quotes-All-Occasions-Unforgettable-ebook/dp/B06Y3TB8VC/garrphotgall-20">
    <asp:image runat="server" ImageUrl="images/MovieQuotesForAllOccasions.jpg"  style="width:144px;height:144px;margin-left: 60px;" /><br />
    <asp:Label runat="server" Target="_blank"></asp:Label>
        </asp:HyperLink>
    </div>
    . . .

I changed the margin-left from 60 to 6, to see if that would at least "free up" the right border, but it didn't.

What is interfering with the free flow of my border, and how can I get it to display in an unbroken line all around the column?

UPDATE

Here is a better screenshot to show where the border is "skipping" (sort of a madcap "dashed" look to it):

I even tried adding this, based on an answer below:

<div id="leftCol" runat="server" class="col" style="margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;">

...but there is still no change - it looks the same as the Update screen shot above.

UPDATE 2

My Site.CSS is not being read, so I put a style tag inline, in the header section, and added those:

<style>
mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>

...and added the classes like so to the outer two columns (left and right) - adding it to the middle caused all Dallas to break loose, visually speaking:

<div id="leftCol" runat="server" class="col mx-0 px-0">

...which caused things to go "wacky" (appearance-wise) and also did not solve the border problem.

Here is the image code for the left column:

<div class="row">
    <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="https://www.amazon.com/SAMSUNG-65-inch-  Curved-TU-8300-Built/dp/B08BTJ5JZ8/garrphotgall-20">
    <asp:image runat="server" ImageUrl="Images\Samsung65.jpg" style="width:144px;height:144px;border:   2px solid blue;" /><br />
    </asp:HyperLink>
</div>

Using those classes (and removing the margin-left setting of 60px which I had in the images) gives me this:

As you can see, the images in the left column are trying to escape to the West.

I have not removed the margin settings on the images on the right column, which are like this:

<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="https://www.amazon.com/Samsung-  QN82Q60RAFXZA-Flat-QLED-Smart/dp/B07N4L5VYG/garrphotgall-20">
    <asp:image runat="server" ImageUrl="Images\SamsungQN65.jpg" Target="_blank"     style="width:144px;height:144px;margin-left: 60px;border: 2px solid blue;" /><br />
</asp:HyperLink>

UPDATE 3

I finally understood what MaxiGui was saying, and added this to each image row:

<div class="row mx-0 px-0">
    <asp:HyperLink ID="HyperLink4" runat="server" 
            NavigateUrl="https://www.amazon.com/SAMSUNG-65-inch-Curved-TU-8300- 
            Built/dp/B08BTJ5JZ8/garrphotgall-20">
        <asp:image runat="server" ImageUrl="Images\Samsung65.jpg"        
            style="width:144px;height:144px;border: 2px solid blue;" /><br />
    </asp:HyperLink>
</div>

...and now it's much improved: the border looks good:

...but I don't really want the images hugging the left side like that, so will tweak the left margin value... I changed margin left to 60 in the CSS class:

mx-0 {
    margin-left: 60px !important;
    margin-right: 0 !important;
}

...and it makes no difference. What?!? Yet, if I add margin left of 60 directly into the last/bottom image like so:

<div class="row mx-0 px-0">
    <asp:HyperLink ID="HyperLink2" runat="server" 
            NavigateUrl="https://www.amazon.com/Film-Buffs-Bucket-List- 
            Movies-ebook/dp/B01BW5E4YY/garrphotgall-20">
        <asp:image runat="server" ImageUrl="Images\FilmBuffsBucketList.jpg" 
            Target="_blank" style="width:144px;height:144px;margin-left: 
            60px;border: 2px solid blue;" /><br />
    </asp:HyperLink>
</div>

... it does work (bottom image):

UPDATE 4

Awedly enough, it's working perfectly now (see below), but only when I both incorporate the classes from MaxGui to the rows AND add an inline left-margin of 60 to the images, such as:

<div class="row mx-0 px-0">
    <asp:HyperLink ID="HyperLink2" runat="server" 
            NavigateUrl="https://www.amazon.com/Film-Buffs-Bucket-List- 
            Movies-ebook/dp/B01BW5E4YY/garrphotgall-20">
        <asp:image runat="server" ImageUrl="Images\FilmBuffsBucketList.jpg" 
            Target="_blank" style="width:144px;height:144px;margin-left: 
            60px;border: 2px solid blue;" /><br />
    </asp:HyperLink>
</div>

What worries me, though, with this adding of 60px that I'm giving to the images is that it will go squirrelly when viewed on smaller devices (tablets and phones). The images will overflow their borders and invade neighboring countries, probably...

Solution

It is because bootstrap apply by default a padding on all its column. As you can see in below code:

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

This padding is here to compensate the margin that is set by bootstrap in row, as you can see in the below code:

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

So f you dont want this to happen, I recommand you to always apply mx-0when you have a row and px-0 when you have a col

This class will be like:

mx-0{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
px-0{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

So just apply row mx-0 and col-6 px-0 Then you will probabaly need to adjust some of your div in col-6 to get a bit space.