image overwritten if I set a margin - html

Question

Using this html code:
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" >
<p style="margin-top: 20px; margin-bottom: 0px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
It works fine, however, I need to add a left margin of 50px before MyImage2.
So I update my code this way.
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" style="margin-left: 50px;">
<!-----------------50 px margin added------------->
<p style="margin-top: 20px; margin-bottom: 0px;margin-left: 50px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
With this code I have a responsivity issue.
If I reduce the window size, the "other HTML stuff" displayed on the right frame overwrites the image2 of 50 pixels.
How can I have the right frame not to overwrite the right part of my image2?
I tried to increase the width of the td and / or table tage, it did not work for me. So hopefully someone can help me there.
EDIT:
you can check the issue on this link:
http://www.bootply.com/t1hF1cHuD2
reduce the window to have right frame to overwrite the left frame (which is what I want not to happen)

Answer 1

Try not to use inline styles as sometimes it can cause problems, I suggest making a section in the header and try putting margin-left:50px !important; and see if that works. Also you could use position:relative; and using top left right bottom properties to move it where you want.

Answer 2

The layout using columns with a width percentage (25%). So if you do not want to change the logic of the layout, the simplest solution is to add the same margin to the right content to always stay away from the image.
<div align="left" style="margin-left:50px;" >
Here the example. With the colors you can see what happens to your columns (and contents) in responsive: JS Fiddle link