I’ve tried a few things here. I created the content in its own ul class, I’ve tried it inside the hero_text div, I’ve used this first snippet below and I have also explored other flexbox justify-content and align items. I’ve looked through the code for any errant margin-left but I didn’t find anything that looked like it was impacting this.
I originally had these social links in the footer, and the issue persisted. I thought that trying it in another area I could attempt to find the problem and fix it, but I have not been able to figure it out.
.social_links {
width: 600px;
max-width: 100%;
display: flex;
flex-direction: row;
list-style-type: none;
align-items: left;
}
.social_links ul {
display: flex;
max-width: 100%;
}
.social_links li {
font-family: "neue-haas-grotesk-display", sans-serif;
display: flex;
padding: 8px;
}
I've tried a few things but it doesn't seem to fix the issue. What am I missing here?
body {
max-width: 100%;
height: 100%;
margin-left: 48px;
margin-right: 48px;
font-family: 'DM Sans', sans-serif;
padding: 4px;
background-color:#0c4340;
}
.header {
display: flex;
flex-direction: row;
color: #f8f8f8;
}
.navbar {
border-radius: 4px;
border: solid 2px #fbd177;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
max-width: 1000;
padding: 4px;
font-size: 18px;
position:static;
margin-left:auto;
margin-right:auto;
}
.logo {
transform: skew(2 0) rotateX('45');
transition: transform .2s linear;
font-size: 24px;
font-family: "neue-haas-grotesk-display", sans-serif;
}
.logo:hover{
transform: scale(0.6) rotate(4deg);
color: #f8f8f8;
}
.nav_links {
list-style-type: none;
margin: 16;
padding: 8;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: #f8f8f8;
}
.nav_links li {
padding: 0 24px;
flex-direction: row;
font-size: 20px;
font-weight: 600;
list-style-type: none;
font-family: 'DM Sans', sans-serif;
}
.nav_links ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
a {
color: #f8f8f8;
text-decoration: none;
margin-top: 24px;
}
a:link {
color: #f8f8f8;
}
a:hover {
color: #ff2d2d;
text-decoration: none;
font-weight: 400;
background-color:
}
a:active {
color: #f8f8f8;
}
h1 {
font-size: 48px;
font-family: "neue-haas-grotesk-display", sans-serif;
color: #f8f8f8;
line-height: normal;
font-weight: 700;
font-style: normal;
}
h2 {
font-size: 32px;
font-family: "neue-haas-grotesk-display", sans-serif;
line-height: normal;
color: #f8f8f8;
font-weight: 800;
}
h3 {
font-size: 24px;
line-height: normal;
color: #f8f8f8;
font-family: "neue-haas-grotesk-display", sans-serif;
}
p {
color: #f8f8f8;
font-family: 'DM Sans', sans-serif;
font-weight: 400;
line-height: 1.4rem;
text-align: left;
letter-spacing: 0.05rem;
}
.hero {
display: flex;
float: right;
margin-top: 24px;
width: 800px;
max-width: 90%;
border-radius: 24px 4px 24px 4px;
border: 0px;
}
.hero_text {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin-top: 48px;
margin-right: 48px;
width: 600px;
max-width: 100%;
text-align: left;
font-weight: 700;
}
.name {
color: #f8f8f8;
text-align: left;
width: 100%;
font-weight: 600;
font-size: 36px;
line-height: 120%
}
.hero_text ul {
display: flex;
justify-content: flex-start;
align-items:left;
}
.artstation:hover {
content: url("Logo/artstation hover.svg")
}
.github:hover {
content: url("Logo/github hover.svg")
}
.linkedin:hover {
content: url("Logo/linkedin hover.svg")
}
.h1color h1 {
color: #f8f8f8;
text-align: center;
text-decoration: none;
}
.h1color h1, a:active {
text-decoration: none;
}
.h1color h1, a:hover{
text-decoration: none;
}
.film {
background-image: url(Images/Cars.png);
height: 400px;
max-width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
display: flex;
justify-content: space-around;
box-shadow: inset 0 0 0 2000px rgba(127, 119, 127, 0.2);
}
.film_text {
padding-top: 150px;
margin-top: 24px;
width: 100%;
}
.digital {
background-image: url(Images/berries.jpg);
height: 400px;
max-width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: sticky;
background-attachment: scroll;
display: flex;
justify-content: space-around;
box-shadow: inset 0 0 0 2000px rgba(127, 119, 127, 0.2);
}
.digital_text {
padding-top: 125px;
vertical-align: center;
width: 100%;
}
.row {
display: flex;
flex-direction: row;
padding: 0 4px;
}
.column {
display: flex;
flex: 25%;
flex-direction: column;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
header h2 {
font-size: 42px;
line-height: normal;
color:#1e90ff;
}
header p {
font-size: 18px;
line-height: normal;
color: #1e90ff;
padding-bottom: 24px;
}
footer {
max-width: 100%;
display: flex;
flex-direction: row;
}
.copyright {
color: #f2f2f2d3;
text-decoration: none;
padding: 8px;
text-align: left;
width: 100%;
display: flex;
flex-direction: row;
}
.people {
background-image: url(Images/lookleft.jpg);
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
box-shadow: inset 0 0 0 2000px rgba(127, 119, 127, 0.2);
}
.people_text {
padding-top: 24px;
width: 100%;
text-align: center;
vertical-align: center;
}
.places {
background-image: url(Images/bwbuilding.jpg);
max-width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
box-shadow: inset 0 0 0 2000px rgba(127, 119, 127, 0.2);
}
.places_text {
padding-top: 125px;
vertical-align: center;
width: 100%;
}
.things {
background-image: url(Images/whiteflower.jpg);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
box-shadow: inset 0 0 0 2000px rgba(127, 119, 127, 0.2);
}
.things_text {
padding-top: 125px;
vertical-align: center;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Photography, Portfolio, Design, San Francisco">
<meta name="description" content="Vic de Aranzeta creative portfolio and coding project">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Vic de Aranzeta Creative Portfolio</title>
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://use.typekit.net/vqx4ohk.css">
<link rel="stylesheet" href="<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap">
</head>
<!--navigation and header-->
<body>
<script src="script.js"></script>
<header>
<nav class="navbar">
<div class="logo">
<a href="index.html"><h3>vic de aranzeta</h3></a>
</div>
<ul class="nav_links">
<li class="active">
<a href="index.html" class="nav_link" alt="info">info</a>
</li>
<li>
<a href="stills.html" class="nav_link" alt="stills">stills</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="hero"><img src="Images/vic hero.jpg" alt="Vic de Aranzeta sitting in a chair smiling" class="hero"></div>
<div class="hero_text">
<p class="name">Kaixo! I'm Vic de Aranzeta. </p>
<p> A Design Anthropologist, User Experience Designer, Photographer, and Illustrator based in <s>sunny</s> foggy San Francisco.
I'm a Principal Product Designer by day - Outside of work you can find me snapping photos on my Fujifilm X-T30II, playing video games, or reading a book.
Check out my <u><a href="https://www.vicdearanzeta.com" class="link">design portfolio</a></u> to see more work. This website is to practice front-end web development.</p>
<ul>
<li><a href="https://www.linkedin.com/in/vicdearanzeta" target="_blank"><img src="Logo/mdi_linkedin.svg" width="32px" height="32px" class="linkedin" alt="linkedin"></a></li>
<li><a href="https://github.com/vdaranze" target="_blank"><img src="Logo/mdi_github.svg" width="32px" height="32px" class="github" alt="github"></a></li>
<li><a href="https://www.artstation.com/vicdearanzeta" target="_blank"><img src="Logo/mdi_artstation.svg" width="32px" height="32px" class="artstation" alt="artstation"></a></li>
</ul>
</div>
</main>
<!--footer-->
<footer>
<p class="copyright">©2023 Vic de Aranzeta</p>
</footer>
</aside>
</div>
</div>
</div>
</body>
</html>
```
2
Answers
I analyzed all of this and rest of code which is also present on your github account.
there are only some line of code was missing:
In html File i just added a class in ul class="social-media" and then i applied CSS on this. In CSS file added code is given below:
This Will solve your Icons Align Problem.
This line you can also add if you want to make this line of code(written below) center with icons.
Final Result Image:
The culprit is padding. The user agent stylesheet (aka browser default) includes a declaration of
padding-inline-start: 40pxforulAlso, don’t forget to remove the list marker using
list-style-type: none