How to wrap parent div around float:left child div? - html

Question

I'm trying to get the headerLinks div to wrap around both headerLink divs so that I can move the links and edit the margins of the links as a whole. Is this the best way to do it? And if so, how would I fix my code? Thank you in advance.
This is my code:
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}
#headerItems {
list-style-type: none;
overflow: hidden;
margin: 10px;
padding: 0px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
.headerLinks {
display: inline-block;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: right;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<ul id="headerItems">
<li id="headerName">My name</li>
<div id="headerLinks">
<li class="headerLink">Link 1
</li>
<li class="headerLink">Link 2
</li>
</div>
</ul>
</div>

Answer 1

Only the links on the right should be in a ul.
And I'm pretty sure you don't want the links reversing the order,
So you will need to add float:right on the parent (headerLinks), and float left on the lis
* {box-sizing: border-box;}
body {margin: 0;}
#header {
background-color: #EDEDED;
position: fixed;
width: 100%;
top: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
padding: 10px;
}
#headerName {
float: left;
display: inline-block;
color: #3D3D3B;
font-size: 28px;
}
#headerLinks {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
float: right;
}
.headerLink {
text-align: center;
margin: 5px;
float: left;
}
.headerLink a {
color: black;
padding: 5px;
background-color: #E1E1E1;
text-decoration: none;
font-size: 20px;
}
<div id="header">
<span id="headerName">My name</span>
<ul id="headerLinks">
<li class="headerLink">Link 1</li>
<li class="headerLink">Link 2</li>
</ul>
</div>
If you want to make a dropdown menu, you will nest another ul inside the li