Co zrobić aby link nie wyjeżdzał po za div ? tak jak na zdjęciu elemety a ( miejscowości )
https://imagizer.imageshack.com/img921/1214/a82XZw.png
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>onet.pl</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d1c838dcd7.js"></script>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<div class="logo"><img src="img/logo.png"> </div>
</div>
</header>
<nav>
<ul>
<li>
<a href="#">piłka nożna</a>
<a href="#">f1</a>
<a href="#">siatkówka</a>
<a href="#">żużel</a>
<a href="#">ręczna</a>
<a href="#">tenis</a>
<a href="#">kolarstwo</a>
<a href="#">boks</a>
<a href="#">mma</a>
<a href="#">ofsajd</a>
</li>
</ul>
</nav>
<main>
<div class="imgsection">
<h1>Brazylia wygrała mecz o półfinał ! </h1>
</div>
<div class="sekcje">
<div class="section2">
<img src="img/section2img.jpg">
<p>motor klasyczny</p>
</div>
<div class="section2">
<img src="img/section2img.jpg">
<p>motor klasyczny</p>
</div>
<div class="section2">
<img src="img/section2img.jpg">
<p>motor klasyczny</p>
</div>
<div class="section2">
<img src="img/section2img.jpg">
<p>motor klasyczny</p>
</div>
<aside>
<div class="asideicons">
<div class="icons"><i class="fas fa-bolt"></i>
<p>1123</p>
</div>
<div class="icons"><i class="fas fa-bolt"></i>
<p>1223</p>
</div>
<div class="icons"><i class="fas fa-bolt"></i>
<p>1233</p>
</div>
<div class="icons"><i class="fas fa-bolt"></i>
<p>1233</p>
</div>
</div>
<div class="sectionaside">
<div id="icon"> <i class="fas fa-map-pin"></i></div>
<button>lista</button>
<div class="contentbutton">
<ul class="linki">
<li><a href="">Białystok</a></li>
<li><a href="">Warszawa</a></li>
<li><a href="">Opole</a></li>
<li><a href="">Wrocław</a></li>
<li><a href="">Katowice</a></li>
<li><a href="">Kraków</a></li>
<li><a href="">Lublin</a></li>
<li><a href="">Poznań</a></li>
<li><a href="">Gorzów</a></li>
<li><a href="">Sopot</a></li>
<li><a href="">Gdańsk</a></li>
</ul>
</div>
</div>
</aside>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Fira Sans', sans-serif;
}
header {
height: 70px;
border-bottom: 1px solid gray;
position: relative;
}
.logo {
width: 15%;
top: 7px;
left: 100px;
position: absolute;
}
.logo img {
height: auto;
width: 100%;
}
nav {
width: 100%;
height: auto;
}
nav li {
list-style: none;
margin-top: 20px;
text-align: center;
}
nav li a {
text-decoration: none;
text-transform: uppercase;
padding: 20px;
color: black;
}
nav li a:hover {
background-color: #ecf0f1;
}
main {
height: 500vh;
width: 1024px;
margin: 0 auto;
margin-top: 50px;
position: relative;
}
.imgsection {
width: 1024px;
height: 587px;
position: relative;
}
.imgsection {
background-image: url(img/photo1.jpg);
}
.imgsection h1 {
font-size: 55px;
color: White;
position: absolute;
top: 75%;
margin: 0 0 60px 60px;
border-left: 10px solid yellow;
padding-left: 30px;
text-shadow: 2px;
rgba(0, 0, 0, .3);
}
.sekcje {
width: 1024px;
height: 500px;
position: relative;
}
.section2 {
width: 35%;
float: left;
padding: 20px 20px 0 0;
}
.section2 img {
max-width: 100%;
height: auto;
}
aside {
height: 300px;
width: 30%;
position: absolute;
top: 0;
left: 70%;
margin-top: 20px;
}
.asideicons {
width: 100%;
height: 60px;
border-bottom: 1px solid gray;
}
.icons {
font-size: 20px;
margin-left: 30px;
float: left;
text-align: center;
margin-top: 10px;
transition: .4s;
border-bottom: 2px solid yellow;
}
.icons:nth-of-type(2),
.icons:nth-of-type(3),
.icons:nth-of-type(4) {
border-bottom: 0px;
}
.icons:nth-of-type(2):hover,
.icons:nth-of-type(3):hover,
.icons:nth-of-type(4):hover {
border-bottom: 2px solid gray;
}
.sectionaside {
position: relative;
width: 100%;
height: 150px;
}
#icon i {
margin: 10px 0 0 5px;
font-size: 20px;
border-right: 1px solid gray;
padding-right: 5px;
}
.sectionaside button {
top: 10px;
left: 30px;
text-decoration: none;
position: absolute;
color: black;
}
.contentbutton {
position: relative;
height: 350px;
widows: 100%;
background-color: aqua;
}
.linki {
position: absolute;
height: 80%;
width: 100%;
background-color: chartreuse;
bottom: 0;
}
.linki ul {
display: block;
}
.linki li {
width: 50px;
height: auto;
list-style: none;
margin-top: 10px;
display: block;
}
.linki a {
text-decoration: none;
text-transform: uppercase;
color: black;
display: block;
}