How to have menu items streched in full width menu with css for any screen automatically -

i have menu items must streched automatically in full width menu.how best way type of screen automatically css?

i tried

.report_types_section ul li {  position: relative; display: inline-block; width: auto; }.report_types_section ul li {  float: left; text-decoration: none;  color: #74a9d4; font-size: 18px; display: block; text-align: center;  width: 100%; padding-left: 15px; padding-right: 35px; text-transform: uppercase; }.report_types_section ul li a:after {  content: " | "; color: #74a9d4; font-size: 18px; float: right; padding-left: 23px;  position: absolute; 

} screen here need increase padding not good.

in absence of having provided markup- have made few inferences- wish achieve can used css tables (in absence of greater support flexbox)

html,  body {    width: 100%;    margin: 0;  }  ul,  li {    padding: 0;    margin: 0;  }  .report_types_section ul {    display: table;    table-layout: fixed;    width: 100%;  }  .report_types_section ul li {    display: table-cell;  }  .report_types_section ul li:not(:last-of-type) {    border-right: 1px solid #74a9d4;  }  .report_types_section ul li {    text-decoration: none;    color: #74a9d4;    white-space:nowrap;    font-size: 18px;    display: block;    text-align: center;    text-transform: uppercase;  }

<div class="report_types_section">    <ul>      <li><a href="#">menu item</a>      </li>      <li><a href="#">menu item</a>      </li>      <li><a href="#">menu item</a>      </li>      <li><a href="#">menu item</a>      </li>    </ul>    </div>

you can apply white-space: nowrap; child a prevent wrapping.