Safari 10.1 doesn’t display the page correctly: Safari 10.1 doesn’t display the page correctly in part that the picture and title that supposed  to be on the middle and display properly on Fair Fox and  Chrome displayed on the side of the screen.

I find a similar question on Apple Communities:

https://discussions.apple.com/message/31621999#31621999

The suggested solution is to Restore Standard Fonts:


  Try Applications > Font Book > File > Restore Standard Fonts


But I could not find where in  Applications > the Font Book  File located.

How do I  find it or use it in another solution to fix formatting issues in Safari 10.1?



//EDITED

&lt;style type="text/css"&gt;
    .pics-wrapper {           
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex; 
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.pics-wrapper: width: 851px;

table {             
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.left-pics p,
.right-pics p 
.bottom-pic p
{            
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

}

.left-pics img,
.right-pics img 
.bottom-pic img
{
  padding:2px;
}



@media (max-width:960px) {
 .left-pics p,
 .right-pics p 
 .bottom-pic p
 {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
 }
   }
It seems like you've run into a bug with the Safari renderer. Resize the window vertically and the page reflows correctly. Resize horizontally and the page extends horizontally incorrectly. I'd avoid using tables for layout and stick to using flex.

Extract the image out of the table layout. Replace the following from your code:


&lt;table id="Table_01" border="0" width="851" cellspacing="0" cellpadding="0"&gt;
  &lt;tr&gt;
    &lt;td colspan="2"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td colspan="7" rowspan="9"&gt;&lt;img id="biggest_one" style="display: block; margin-left: auto; margin-right: auto;" src="https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg" alt="" width="480" height="640" name="biggest_one"
      /&gt;&lt;/td&gt;
    &lt;td colspan="2" rowspan="10"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td&gt;&lt;img src="photo_over/spacer.gif" alt="" width="1" height="3" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;



with the following:

&lt;img id="biggest_one" style="display: block; margin-left: auto; margin-right: auto;" src="https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg" alt="" width="480" height="640" name="biggest_one"&gt;


Then add the following CSS to .pics-wrapper: width: 851px;.



The solution referred to in your link (not that it would solve the problem here but it's something you asked for) is as follows:


Open the Font Book app from the Applications folder.


Choose the File menu followed by Restore Standard Fonts.