I'm struggling to figure out how to make the headerLinks div encompass both headerLink divs so that I can adjust the links' positions and margins as a group. Is there a better approach I should be taking? If so, could you provide guidance on how to correct my code? Thank you in advance.
Here is the code snippet:
#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"><a href="" target="_blank">Link 1</a>
</li>
<li class="headerLink"><a href="" target="_blank">Link 2</a>
</li>
</div>
</ul>
</div>