Anchor link binding to different anchor - html

Question

So I'm having a problem where some buttons in a seperate div are binding to a header I've absolute positioned the logo's and the intro section is a separate div.
Heres the html including buttons that aren't working
<div class="header">
<div class="logo-right">
<img src="/img/project-logo.png" alt="Hedonist Project" />
<img src="/img/drinks-logo.png" alt="Hedonist Drinks" />
</div>
<div class="logo">
<img src="/img/logo.png" alt="Hedonist Events" />
<h4>a creative drinks consultancy</h4>
</div>
</div>
<div class="intro">
<div class="container">
<div class="intro__text editable"><h3>Hedonist Events are an events agency
for bar staff, bar management, events production and pop-up bars.</h3>
<div class="intro__buttons">
<a class="btn" href="#contact">get in touch</a>
<a class="btn" target="_blank" rel="noopener" href="deck.html">see the event deck</a>
</div>
Heres the css
.logo {
display: flex;
position: absolute;
top: 5.3em;
left: 6.5em;
right: 0;
bottom: 0;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 850px) {
display: block;
left: 4.3em;
}
}
.logo-right {
position: absolute;
top: 5.3em;
right: 12.5em;
bottom: 0;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 1300px) {
right: 8em;
}
#media (max-width: 950px) {
display: none;
}
}
.header {
height: 20em;
width: 100%;
#media (max-width: 1000px) {
height: 10em;
}
}

Answer 1

When using absolute in this case the header as to be relative:. Also using absolute position and you want to align a tag left just use "left" no need for "right" unless you want it to fill the whole space of the relative container. Update your code with the below
.logo {
display: flex;
position: absolute;
top: 5.3em;
left: 6.5em;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 850px) {
display: block;
left: 4.3em;
}
}
.logo-right {
position: absolute;
top: 5.3em;
right: 12.5em;
img {
height: 3.5em;
width: auto;
padding-right: 1.5em;
}
#media (max-width: 1300px) {
right: 8em;
}
#media (max-width: 950px) {
display: none;
}
}
.header {
height: 20em;
width: 100%;
position: relavtive;
#media (max-width: 1000px) {
height: 10em;
}
}