How can I position a <div> with position:absolute so that it is spaced 20px from the left and right sides while maintaining a width: of 100%? Currently, I have applied margin: 0 20px 0 20px, but I am wondering if there is a way to achieve this without adding any additional inner or outer <div>. Can this be done within the existing structure?
(please do not remove the question, as I have already reviewed similar inquiries)
.navbar {
position: absolute;
width: 100%;
height: 50px;
background: grey;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
padding: 0px;
margin-top: 0px;
line-height: 50px;
}
.navbar ul li {
float: left;
margin-left: 15%;
padding-left: 1%;
padding-right: 1%;
margin-top: 0px;
}
.navbar ul li a {
color: white;
text-decoration: none;
}
.navbar ul li:hover {
background: #585858;
}
.daily {
position: absolute;
top: 70px;
height: 110px;
width: 100%;
border: 1px solid black;
margin: 0 20px 0 20px
} <div class="navbar">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">INFO</a></li>
<li><a href="">ME</a></li>
</ul>
</div>
<div class="daily">
</div>
<div class="aussen">The left spacing appears correct, but I am having trouble achieving the same on the right side. What adjustments should I make to my code? - Open to suggestions for improvements as well :)