The element you apply margin:auto has a display of flex applied but itself is already a flex-item. Auto margins on flex-items will push the element away from the sides. A flex item does not have a specific width unless you give it one, or it has content width or you make it grow etc.
This is compounded in your example because there are two parents of display:flex (both of which are not needed) meaning that flex-items are within flex-items so their width may be controlled by the largest content
If you remove display:flex from .wrapper and from .bcontent then the margin:auto will work on .prevnext as normal because it is no longer a flex-item. Or as I suggested force a width on prevnext instead.
The main takeaway is that you don’t add flex to wrappers where you are not using the flex properties for layout. There’s no need and you make it harder for yourself when you have to remember that a flexbox is also a flexitem and will be affected by flex-item properties.
You can see your set up in the first example here along with some simple demos.
All can be avoided by not nesting the flexbox unless you have to. When you nest a flexbox remember that its width may not be what you expect and auto margins will work differently.