Web site responsiveness issue with images and right aligned text - html

Question

I've tried to make my website responsive but I am running into two major issues.
I have a right aligned text that disappears off the screen when I reduce the width of the window instead of remaining aligned. I've tried margin-right: auto; but it doesn't work. This right aligned text I want to make responsive is also on the same line as a <li> item
<li><h3>Kid's menu<span class="tabbed_text">25,50 lei</span></h3> </li>
<li><h3>Menu #1<span class="tabbed_text">25,50 lei</span></h3> </li>
<li><h3>Menu #2<span class="tabbed_text">25,50 lei</span></h3></li>
<li><h3>Menu #3<span class="tabbed_text">25,50 lei</span></h3></li>
This is the html I used
.tabbed_text{
display:inline-block;
font-family: "caveat";
font-size: 30px;
position:absolute;
left:1750px;
}
li{
font-family: "cattie";
font-weight: bold;
font-size: 25px;
}
this is the css use for them
This is how they look like on screen
The second issue is related to an image:
This it how it looks like on fullscreen but when I shrink the window it ends up like this:
this is the css I used for the image:
.small_logo{
width: 150px;
height: auto;
position:absolute;
top:3%;
left:34%;
}

Answer 1

Issue 1: You set span tag is position:absolute;left:1750px;
=> so you can not make it responsively when you shink.
HTML:
<ol>
<li>
<div>
Kid's menu
<span class="tabbed_text">25,50 lei</span>
</div>
</li>
</ol>
CSS:
div {
font-family: "caveat";
font-size: 30px;
display: flex;
justify-content: space-between;
}
a {
font-family: "caveat";
font-size: 30px;
}
li {
font-family: "cattie";
font-weight: bold;
font-size: 25px;
}
You can see the sample here:
Issue 2: I will help when you clear your question!