Adjust Halstack's website endpoints

[GomezIvann]

We need to rethink the responsive endpoints of our documentation site. When the screen is too small (like a smartphone) the margin decreases its size to let the content occupy as much as possible. This makes a lot of sense but it has a visual defect with the heading hyperlink icon:

The hyperlink icon is also cut off when the screen is a certain width between laptop and desktop modes:

The task here is to update and adjust the website containers' media queries and responsive endpoints.

[GomezIvann]

Also, the hyperlinks next to the headings are not scrolling the page right in responsive mode when the side nav is hidden and shown by the "Menu" trigger. If you click on a heading link, the section title is cut off by the menu trigger:

screen-capture.webm