how to stretch a UL across the browser window - html

Question

I have an UL that acts as my navigation bar on my web page. currently it is all the way to the left of the screen. I would like it to be centered and have the background color stretch all the way to the left and right, Like below. what would I need to change to stretch the UL across the page like the top example image?
Here is what it looks like currently:
Here is my code:
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #1D3567;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent:hover>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #1D3567;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
min-width: 15em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #95B4CA;
}
<ul id="nav_ul">
<li class="parent">Home</li>
<li class="parent">Outlook Web</li>
<li class="parent">Production
<ul class="child">
<li class="parent">Hennig South</li>
<li class="parent">Hennig Enclosure Systems</li>
<li class="parent">Hennig South</li>
<li class="parent">Factory Andon</li>
<li class="parent">Web Docs</li>
</ul>
</li>
<li class="parent">IT
<ul class="child">
<li>Knowledge Base</li>
<li>Submit a Ticket</li>
<li class="parent">Archived Links</li>
</ul>
</li>
<li class="parent">Office Directories
<ul class="child">
<li>Hennig</li>
<li>AME</li>
</ul>
</li>
<li class="parent">Hennig Parts</li>
<li class="parent">Factory Andon</li>
<li class="parent">Business Cards</li>
<li class="parent">Reports
<ul class="child">
<li class="parent">Global Shop<span class="expand">»</span>
<ul class="child">
<li>Inventory Report</li>
<li>Sales Report</li>
<li>Quotes Report</li>
<li>Work Order Report</li>
<li>Part Where Used Report</li>
</ul>
</li>
<li class="parent">Ndustrios<span class="expand">»</span>
</li>
</ul>
</li>
</ul>

Answer 1

Make your ul a flex container in which you align the children centered, and apply the background-color to this element instead of the li children by adding this rule:
#nav_ul {
width: 100%;
display: flex;
justify-content: center;
background-color: #1D3567;
}
.parent {
position: relative;
float: left;
line-height: 30px;
background-color: #1D3567;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent:hover>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
min-width: 15em;
}
#nav_ul {
width: 100%;
display: flex;
justify-content: center;
background-color: #1D3567;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #95B4CA;
}
<ul id="nav_ul">
<li class="parent">Home</li>
<li class="parent">Outlook Web</li>
<li class="parent">Production
<ul class="child">
<li class="parent">Hennig South</li>
<li class="parent">Hennig Enclosure Systems</li>
<li class="parent">Hennig South</li>
<li class="parent">Factory Andon</li>
<li class="parent">Web Docs</li>
</ul>
</li>
<li class="parent">IT
<ul class="child">
<li>Knowledge Base</li>
<li>Submit a Ticket</li>
<li class="parent">Archived Links</li>
</ul>
</li>
<li class="parent">Office Directories
<ul class="child">
<li>Hennig</li>
<li>AME</li>
</ul>
</li>
<li class="parent">Hennig Parts</li>
<li class="parent">Factory Andon</li>
<li class="parent">Business Cards</li>
<li class="parent">Reports
<ul class="child">
<li class="parent">Global Shop<span class="expand">»</span>
<ul class="child">
<li>Inventory Report</li>
<li>Sales Report</li>
<li>Quotes Report</li>
<li>Work Order Report</li>
<li>Part Where Used Report</li>
</ul>
</li>
<li class="parent">Ndustrios<span class="expand">»</span>
</li>
</ul>
</li>
</ul>