Text centered with the logo but icon on the left of it - html

Question

I'm working on a project that provided me some pictures of the website look :
As you can see, the logo and the text under are both aligned in the center but the little icon is a bit on the left of the location, how can I do to make it look that way? And also, I want this little icon to not move between my desktop, tablet and smartphone look.
I have tried to use position: absolute, but it's always moving around between desktop and smartphone, it doesn't stay right next to my text. Basically I want this icon to be at the same distance on PC, tablet and phone.
Thanks in advance for all the help you can provide me!
#import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */
header {
box-sizing: border-box;
height: 4rem;
padding-bottom: 1rem;
background-color: white;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 0rem;
padding-top: 0.5rem;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
}
.localisation i {
position: absolute;
left: 20rem;
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>

Answer 1

remove the styling on the icon, let flex handle the position of the elements. If you want to create extra space between the icon and text, use css gap (see example).
Also I added flex-wrap: nowrap; so the text wouldn't wrap under the icon when it gets too small
#import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */
header {
box-sizing: border-box;
height: 4rem;
padding-bottom: 1rem;
background-color: white;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 0rem;
padding-top: 0.5rem;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 5px;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
}
.localisation i {
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>

Answer 2

header{text-align: center;}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
padding-left: 10px;
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js"
crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
</main>

Answer 3

Just remove position: absolute; from your .localisation i style.

Answer 4

Just remove the .localization i style because you have given the left alignment.
#import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
/* Header */
header {
box-sizing: border-box;
height: 4rem;
padding-bottom: 1rem;
background-color: white;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 0rem;
padding-top: 0.5rem;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -8px #CCC;
}
.localisation p {
font-size: 15px;
font-weight: 600;
color: #4D4D4D;
}
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p> Paris, Belleville</p>
</div>