GridView out of page border

I’m using GirdView and Active data provider to view my tables data my code at view :

<?= GridView::widget([

'tableOptions' =&gt;  ['class' =&gt; 'table table-striped table-bordered'],


'dataProvider' =&gt; &#036;projectsDataProvider,


'columns' =&gt; [


    ['class' =&gt; 'yii&#092;grid&#092;SerialColumn'],


    'project_name',


    'client_name',


    'client_representative',


    'client_email',


    'project_type',             


    'project_manager',


    'project_location',


     'project_type2',             


    'project_manager2',


    'project_location2',


       ['class' =&gt; 'yii&#092;grid&#092;ActionColumn'],

]);

?>

when i increase the number of columns it goes out of border as shown in picture

I’m using GirdView and Active data provider to view my tables data my code at view :

<?= GridView::widget([

‘tableOptions’ => [‘class’ => ‘table table-striped table-bordered’],

‘dataProvider’ => $projectsDataProvider,

‘columns’ => [

[‘class’ => ‘yii\grid\SerialColumn’],

‘project_name’,

‘client_name’,

‘client_representative’,

‘client_email’,

‘project_type’,

‘project_manager’,

‘project_location’,

‘project_type2’,

‘project_manager2’,

‘project_location2’,

[‘class’ => ‘yii\grid\ActionColumn’],

]);

?>

when i increase the number of columns it goes out of border as shown in picture