Magellan floating menu is not responsive

Hello.
My whole site is responsive and changes the sizes and appearance of the pages and the menus depending on the size of the screen, with the exception of the floating menu in my “About” page: https://www.psmtickling.com/about .
The menu gets cut by the page and seems to have no right margin if you shrink the page to the left.
I found the part of my style.css file related to that menu, but changing the width (putting “max-width”) I was only able to make it responsive at the top of the page, when it hasn’t started moving. As soon as you move the page down a bit and the menu’s items get active, the width apparently expands to the right.
The code is the following.

.about-magellan[data-magellan-expedition] {
  width: auto;
  min-width: 307px;
left: auto;
  background: none; }
  .about-magellan[data-magellan-expedition] .sub-nav dd {
    float: none;
    display: block;
    font-size: 18px;
    line-height: 34px; }
    .about-magellan[data-magellan-expedition] .sub-nav dd a {
      color: #5d5d5d; }
    .about-magellan[data-magellan-expedition] .sub-nav dd.active a {
      background: none;
      color: #a10056;
      padding: 0; }

How can I make the menu responsive and make it stay that way?