**Hey Guys, how do i make my “a” element stop overflowing and just occupy the img elements which is neested inside the “a” tag.?.. I gave it a border of white so i can know see where it’s overflowing. **
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Webpage</title>
</head>
<link rel="stylesheet" href="styles.css">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
rel="stylesheet"
/>
<body>
<nav id="navbar">
<ul class="nav-list">
<li class="list-item"><a href="#">About</a></li>
<li class="list-item"><a href="#">Work</a></li>
<li class="list-item"><a href="#">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1 style="color: white;" class="welcome">Hey I am Eastside</h1>
<i><p class="sub-heading" style="color: #ca3433;"">a web developer</p></i>
</section>
<section id="projects">
<h2 class="project-tile">These are some of my projects</h2>
<div class="project-grid">
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank"
class="project"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Tribute Page
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Random Quote Machine
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/wgGVVX"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
JavaScript Calculator
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/mVEJag"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Map Data Across the Globe
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/wGqEga"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Wikipedia Viewer
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/KzXQgy"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Tic Tac Toe Game
<span class="code">/></span>
</p>
</a>
</div>
<a
href="https://codepen.io/FreeCodeCamp/"
class="btn btn-show-all"
target="_blank"
id="button">Show all<i class="fas fa-chevron-right"></i
></a>
</section>
<section id="contact-section">
<h1 class="pro">Let's work together</h1>
<i><p class="how">How do you take your coffee?</p></i>
<div class="socials">
<a href="https://facebook.com/freecodecamp" class="contact-details" target="_blank" ><i class="fab fa-facebook-f" id="facebook"></i>Facebook</a>
<a id="profile-link" href="https://github.com/freecodecamp" class="contact-details" target="_blank" ><i class="fab fa-github"></i>Github</a>
<a href="https://twitter.com/freecodecamp" class="contact-details" target="_blank"><i class="fab fa-twitter"id="twitter"></i>Twitter</a>
<a href="/cdn-cgi/l/email-protection#8beef3eae6fbe7eecbeef3eae6fbe7eea5e8e4e6" class="contact-details" target="_blank" ><i class="fa fa-envelope" aria-hidden="true" id="mail"></i>
Send a mail</a>
<a href="tel:555-555-5555"class="contact-details" target="_blank"><i class="fa fa-mobile" aria-hidden="true" id="phone"></i>Call me</a>
</div>
</section>
<footer>
<p class="fake">
**This is just a fake portfolio. All the projects and contact details
given are not real.
</p>
<p class=freecode>
© Created for
<a href="https://www.freecodecamp.com/" target="_blank"
class="created">freeCodeCamp <i class="fab fa-free-code-camp fa-lg"></i
></a>
</p>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: Poppins, Raleway;
overflow-x: hidden;
}
#navbar {
background-color:#ca3433;
display: flex;
justify-content: flex-end;
font-weight: bold;
position: fixed;
z-index: 1000000;
width: 100vw;
}
.nav-list {
list-style: none;
margin-right: 24px;
}
.nav-list .list-item {
display: inline-block;
padding: 15px 10px;
margin-left: 16px;
}
a {
text-decoration: none;
font-size: 22px;
color: #fdfff5 ;
}
#welcome-section {
background-color: #303030;
height: 100vh;
}
.welcome{
position: absolute;
bottom: 280px;
left: 400px;
font-size: 60px;
}
.sub-heading {
position: absolute;
bottom: 250px;
left: 490px;
font-size: 30px;
}
h2 {
text-align: center;
font-size: 40px;
color: white;
border-bottom: 2px solid white;
display: inline-block;
margin-left: 330;
margin-top: 90
}
#projects {
background-color: #0e4d92;
padding-bottom: 130
}
.project-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 10px;
}
#button {
top: 50px;
}
img {
width: 383px;
height:370px;
position: relative;
margin-right: 12px;
margin-left: 18px;
}
.project-title {
text-align: center;
background-color: #303030;
height: 55px;
width: 383px;
position: relative;
bottom: 22px;
border-radius: 0 0 3px 3px;
}
.project-title {
margin-left: 18px;
padding-top: 20px;
}
a:hover > .code {
transform: translateX(5px);
color: #FFC000;
}
span {
color: #303030;
}
.btn {
position: relative;
left: 570px;
padding: 10px 25px;
font-size: 20px;
color: white;
background-color: #303030;
border: none;
cursor: pointer;
transition: all 0.9s ease;
}
.btn:hover {
background-color: #ca3433;
}
.btn:hover > i {
transform: translateX(5px);
}
button {
margin-top: 100px;
}
#contact-section {
background-color: #303030;
height: 100vh;
padding-top: 10px;
}
.pro {
color: white;
font-size: 55px;
margin-left: 400px;
margin-top: 170px;
}
.how {
position: relative;
bottom: 50px;
left: 490px;
color: white;
font-size: 20px;
}
.contact-details {
margin-left: 17px;
}
i {
margin-right: 7px;
}
.socials {
margin-left: 300
}
.socials > a:hover {
color: grey;
background-color: white;
}
footer {
border-top: 4px solid #ca3433;
background-color : #303030;
padding-bottom: 2px;
}
.freecode {
position: relative;
left: 885px;
bottom: 20px;
color: white;
}
.fake {
position: relative;
left: 75px;
top: 25px;
color: white;
}
.created {
font-size: 17px;
}
a {
border: 3px solid white;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: