Unnecessary indentation on the site in the line

Question

The problem is in the mobile version of the site, either in flexbox, or in svg, or in width, which I don't understand. Devtools shows that there are indents from svg and the text itself has indents

The site itself

I need the lines to be the same on the mobile version of the site. With a small font, everything is fine

Answer 1

what I understood from the code, your .icon class consists of width of 20vw, but your .desc class doesn't have any width.

Now for the section "Fast speed" the content is so small it able to fit itself in a smaller container but rest of them can't as these are all display flex, even though you have added 20vw, it is only getting applied where there is space which is "Fast speed", rest of the .icon class are smaller than 20vw. Hence it is appearing indented.

One solution could be to add width property to .desc class like

.desc {
 width: 80vw;
}

Another solution could be in mobile version.

 .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  /* width: 20vw; */
  padding: 0px 15px;
}