How to shift layout container to the left

in the below code i am trying to display the contents of legend in horizontal alignment.the problem is, the layout that encompass the legend is alligned horizontally " as i like it" but it expands beyond the border of the screen, i do not want the legend container to be like that. i want the layout container that encompass the legend to be shifted or displaced to the left. please let me how to do that.

please let me know how to achieve point one and two.

Code:

<div class="box1" *ngIf="showAreasOfCoverageWithRespectToIntersectedEnvelope==true || showAreasOfCoverage==true">
                        <table>
                            <tr>
                                <td><div id="legend_0_10"></div></td>
                                <td style="text-align: left; vertical-align: middle;">0_10 m</td>

                                <td><div id="legend_10_20"></div></td>
                                <td style="text-align: left; vertical-align: middle;">10_20 m</td>

                                <td><div id="legend_20_30"></div></td>
                                <td style="text-align: left; vertical-align: middle;">20_30 m</td>

                                <td><div id="legend_30_40"></div></td>
                                <td style="text-align: left; vertical-align: middle;">30_40 m</td>

                                <td><div id="legend_40_50"></div></td>
                                <td style="text-align: left; vertical-align: middle;">40_50 m</td>
                            </tr>
                            <tr>
                                <td><div id="legend_50_60"></div></td>
                                <td style="text-align: left; vertical-align: middle;">50_60 m</td>

                                <td><div id="legend_60_70"></div></td>
                                <td style="text-align: left; vertical-align: middle;">60_70 m</td>
                            
                            
                                <td><div id="legend_70_80"></div></td>
                                <td style="text-align: left; vertical-align: middle;">70_80 m</td>
                            
                            
                                <td><div id="legend_80_90"></div></td>
                                <td style="text-align: left; vertical-align: middle;">80_90 m</td>
                            
                            
                                <td><div id="legend_90"></div></td>
                                <td>90 m</td>
                            </tr>
                        </table>
                    </div>

css:

#legend_0_10{
  background-color:#ffffff;
  height:20px;
  width: 30px;
}
#legend_10_20{
  background-color:#ffe2e2;
  height:20px;
  width: 30px;
}
#legend_20_30{
  background-color:#ffc6c6;
  height:20px;
  width: 30px;
}
#legend_30_40{
  background-color:#ffaaaa;
  height:20px;
  width: 30px;
}
#legend_40_50{
  background-color:#ff8d8d;
  height:20px;
  width: 30px;
}
#legend_50_60{
  background-color:#ff7171;
  height:20px;
  width: 30px;
}
#legend_60_70{
  background-color:#ff5555;
  height:20px;
  width: 30px;
}
#legend_70_80{
  background-color:#ff3838;
  height:20px;
  width: 30px;
}
#legend_80_90{
  background-color:#ff1c1c;
  height:20px;
  width: 30px;
}
#legend_90{
  background-color:#ff0000;
  height:20px;
  width: 30px;
}
.flex-container {
  display: flex;
  justify-content: center;
  height: 100px;
  width:100px;
  align-content: center;
  align-items: stretch;
}


.flex-container > div {
  background-color: #a00f0f;
  width: 30px;
  margin: 10px;
  text-align: center;
  line-height: 55px;
  font-size: 10px;
}
.box1 {
  background-color: #aaff00;
  width: 498px;
  float: left;
}
            

screen-shot