Below is the HTML code I am working on:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lawyers' office in Paris 8</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Nunito+Sans:wght@300&display=swap");
</style>
<header class="header">
<div class="logo">
<img
src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/Logo-JDB.png.webp"
alt="logo"
height="123px"
/>
</div>
<div class="ul">
<ul class="list-1">
<li>
<img
src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/enveloppe-icon.png"
alt="envelope-logo"
height="16px"
/>
</li>
<li><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2f2322382d2f380c26282e2d3a232f2d383f622f2321">[email protected]</a></li>
<li>|</li>
<li>
<img
src="/Users/jeandizian/Documents/Code/Site-avocats/Assets/Imgs/phone-icon.png"
alt="phone icon"
height="16px"
/>
</li>
<li>+33 1 42 56 96 96</li>
.....
And this is my CSS styling:
body {
font-family: "Inter", sans-serif;
margin: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: aqua;
top: 0;
left: 0;
right: 0;
}
.logo {
margin-left: 90px;
}
.list-1,
.list-2 {
list-style: none;
display: flex;
justify-content: space-around;
margin: 0;
}
I am trying to recreate a website similar to
You can view my progress so far here: click here
However, I encountered an issue highlighted in the following code snippet:
.list-1,
.list-2 {
list-style: none;
display: flex;
justify-content: space-around;
margin: 0;
The problem is that even though the "space-around" property is applied, it doesn't produce the desired result on the second line. Here is a visual representation of the issue:
Problem
I'm puzzled as to why the spacing effect is not consistent across both lines. My intention is to have equal spacing between words for better alignment with the original website layout.
Your insights and suggestions would be greatly appreciated. Thank you!