100% ширина стола и Div не совсем одинакового размера

Question

У меня есть Div и стол в контейнере. Они оба должны полностью заполнять контейнер, но иногда есть разница в одном пикселе, что очень расстраивает. Я воссоздал тестовый пример и прикрепил скриншот, где ошибка хорошо видна (с правой стороны). Есть ли способ исправить это?

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.head { 
 
    width: 100%; 
 
    background: teal; 
 
} 
 
table { 
 
    width: 100%; 
 
    background: teal; 
 
}

<div class="container"> 
 
    <div class="head"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </div> 
 
    <table> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

Ширина стола: 100% имеет ширину, которая округляется при 100% равно что-то вроде 450,5 пикселей, а ДИВ просто взять полный размер независимо от того, что без округления, поэтому просто поместив: display: table на div исправил проблему.