Ignore parent divs width - html

Question

I have had issues with modify a navigation bar for mobile. I want the navigation bar to ignore its parent div inner-wrapper width of 80% and use a full width of 100%.
The most logical solution I can think of is to set header: relative, width: 100% and header li to absolute with a width of 100%. However, this doesn't seem to work.
I want each navigation to have a full width of the screen rather than a full width of its parent wrapper.
.header {
background-color: #FFB6C1;
color: black;
overflow: hidden;
position: relative;
}
.inner-wrapper {
width: 80%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.header h2 {
float: left;
font-family: 'Pacifico', sans-serif;
font-size: 30px;
}
.header h3 {
padding-top: 5px;
font-family: 'Petit Formal Script';
clear: both;
font-weight: 700;
}
.header span {
font-weight: bolder;
}
.header ul {
float: right;
margin-right: 10%
}
.header ul li {
list-style: none;
display: inline-block;
font-family: 'Podkova', sans-serif;
margin-right: 20px;
font-weight: bold;
}
/* Navigation Menu click for mobile */
.mobile-menu {
padding: 0;
margin: 0;
display: none;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 414px) {
/* Styles */
/* Display flex to change the ordering of HTML elemtns*/
.inner-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.header-title {
order: 1;
}
.header-description {
order: 2;
}
.dropdown {
order: 3;
}
.header-li {
display: none;
position: absolute;
width: 100%;
}
.header ul {
float: none;
margin-right: 0%;
}
.mobile-menu {
padding: 0;
margin: 0;
display: initial;
cursor: pointer;
}
.header ul li {
width: 100%;
background-color: green;
padding-top: 20px;
}
.header {
position: relative;
width: 100%;
}
}
<!-- Header and Navigation -->
<div class="header">
<div class="inner-wrapper">
<h2 class="header-title">text</h2>
<div class="dropdown">
<div class="mobile-menu">
<p align="right">Menu</p>
</div>
<ul class="header-li">
<li>About me</li>
<li>Progress</li>
<li>Food</li>
<li>Contact</li>
</ul>
</div>
<h3 class="header-description">text</span></h3>
</div>
</div>

Answer 1

If you want the navigation to have full width of the screen use width: 100vw; on the child. That means 100% of the view width

Answer 2

Using viewport units seems initially like a good idea, though in this case it is not necessary and will be of no use as the header uses overflow: hidden.
Note, if you start using 100vw it can cause unwanted scrollbar and/or make the element behave in an unwanted way when its parent/body has scrollbar
As the header-li relates to the header (closest ancestor having a position other than static), simply use 100% and transform: translate to position it.
.header-li {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
background: lime;
}
Note, it below sample I colored it light gray so one see how it positions itself
Stack snippet
.header {
background-color: #FFB6C1;
color: black;
overflow: hidden;
position: relative;
}
.inner-wrapper {
width: 80%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.header h2 {
float: left;
font-family: 'Pacifico', sans-serif;
font-size: 30px;
}
.header h3 {
padding-top: 5px;
font-family: 'Petit Formal Script';
clear: both;
font-weight: 700;
}
.header span {
font-weight: bolder;
}
.header ul {
float: right;
margin-right: 10%
}
.header ul li {
list-style: none;
display: inline-block;
font-family: 'Podkova', sans-serif;
margin-right: 20px;
font-weight: bold;
}
.header-li {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
background: lightgray;
}
/* Navigation Menu click for mobile */
.mobile-menu {
padding: 0;
margin: 0;
display: none;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 414px) {
/* Styles */
/* Display flex to change the ordering of HTML elemtns*/
.inner-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.header-title {
order: 1;
}
.header-description {
order: 2;
}
.dropdown {
order: 3;
}
.header-li {
display: none;
position: absolute;
width: 100%;
}
.header ul {
float: none;
margin-right: 0%;
}
.mobile-menu {
padding: 0;
margin: 0;
display: initial;
cursor: pointer;
}
.header ul li {
width: 100%;
background-color: green;
padding-top: 20px;
}
.header {
position: relative;
width: 100%;
}
}
<!-- Header and Navigation -->
<div class="header">
<div class="inner-wrapper">
<h2 class="header-title">text</h2>
<div class="dropdown">
<div class="mobile-menu">
<p align="right">Menu</p>
</div>
<ul class="header-li">
<li>About me</li>
<li>Progress</li>
<li>Food</li>
<li>Contact</li>
</ul>
</div>
<h3 class="header-description"><span>text</span></h3>
</div>
</div>
If you want the header-li to expand beyond the header as well, you will need to both remove overflow: hidden, use 100vw and remove the padding the ul has as a default (or else you'll get a scroll)
.header {
background-color: #FFB6C1;
color: black;
position: relative;
}
.inner-wrapper {
width: 80%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.header h2 {
float: left;
font-family: 'Pacifico', sans-serif;
font-size: 30px;
}
.header h3 {
padding-top: 5px;
font-family: 'Petit Formal Script';
clear: both;
font-weight: 700;
}
.header span {
font-weight: bolder;
}
.header ul {
float: right;
margin-right: 10%
}
.header ul li {
list-style: none;
display: inline-block;
font-family: 'Podkova', sans-serif;
margin-right: 20px;
font-weight: bold;
}
.header-li {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: lightgray;
padding: 0;
}
/* Navigation Menu click for mobile */
.mobile-menu {
padding: 0;
margin: 0;
display: none;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 414px) {
/* Styles */
/* Display flex to change the ordering of HTML elemtns*/
.inner-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.header-title {
order: 1;
}
.header-description {
order: 2;
}
.dropdown {
order: 3;
}
.header-li {
display: none;
position: absolute;
width: 100%;
}
.header ul {
float: none;
margin-right: 0%;
}
.mobile-menu {
padding: 0;
margin: 0;
display: initial;
cursor: pointer;
}
.header ul li {
width: 100%;
background-color: green;
padding-top: 20px;
}
.header {
position: relative;
width: 100%;
}
}
<!-- Header and Navigation -->
<div class="header">
<div class="inner-wrapper">
<h2 class="header-title">text</h2>
<div class="dropdown">
<div class="mobile-menu">
<p align="right">Menu</p>
</div>
<ul class="header-li">
<li>About me</li>
<li>Progress</li>
<li>Food</li>
<li>Contact</li>
</ul>
</div>
<h3 class="header-description"><span>text</span></h3>
</div>
</div>

Answer 3

How's this James?
.theContainer {
width: 200px;
height: 200px;
background-color: gray;
position: relative;
}
.theParent {
width: 80%;
height: 150px;
background-color: lightgray;
}
.theChild {
width: 100%;
background-color: lightgreen;
position: absolute;
}
<div class="theContainer">
<div class="theParent">
This is the parent trying to restrict the child to 80% width.
<div class="theChild">
This is the child with 100% width ignoring parent.
</div>
</div>
</div>