Добавление изображения справа приводит к тому, что таблица внизу справа

У меня есть код HTML. Я добавил два изображения: один выровнен слева и один направо. Затем после этого он имеет два заголовка и таблицу HTML.

Проблема заключается в том, что я использую следующий код для добавления изображений в документ.

<img src="http://Path_To_Foler/Logo1.jpg" align="left" />       
<img src="http://Path_To_Foler/Logo2.jpg" align="right" />  

<p class="h1"><b>Private and Confidential</b> </p>
<p class="h1"><b>REPORT FOR Mr Person A BLA BLA</b> </p>

<table class="table" >
    <tr>
        <td class="CellHeader">Date </td>
        <td class="CellHeader">Time</td>
    </tr>
    <tr>
        <td class="cell"><AssessmentDateFrmMSPAPARR /></td>
        <td class="cell"><CurrentRcFrmMSPAPARR /></td>
    </tr>
</table>

CSS

  <style>
    .CellHeader{
        width:50%;
        text-align:left;
        font-family: 'calibri';
        font-size: 11pt;
        color:#FFFFFF;
        background-color:#151515;
        border:1px solid black;
        border-collapse:collapse;
    }
    .cell{
        width:50%;
        text-align:left;
        font-family: 'calibri';
        font-size: 11pt;
        border:1px solid black;
        border-collapse:collapse;
    }

    .table{
        width:100%;
        border:1px solid black;
        border-collapse:collapse;
    }
    .h1{
        page-break-before: always;
        text-align: center;
        font-family: 'calibri';
        font-size: 12pt;
    }
 <style>

вопрос

Все работало нормально, как ожидалось. Проблема началась, когда я добавил второе изображение. Добавление второго изображения также приводит к выравниванию таблицы.

И когда я вынимаю align:"right" атрибут из элемента изображения, таблица - это то место, где оно должно быть, но второе изображение сдвигается вправо, что является понятным.

Как я могу это исправить?