navigationcontrollerの上にXLPagerTabStripwを使いたい

XLPagerTabStripwを使って1枚目の画像のようにページをスライドさせて画面を切り替えるようにしたいです。

初めに作ったものはnavigationcontrollerを使っておらず２枚目のようにタイトルが上に行き過ぎてしまいました。
そこでnavigationcontrollerを使いnavigation bar の下に表示させようと思ったのですが、3枚目の画像のようにうまく表示されません。

試したこと
ScrollViewをcontainerViewに設定したことの確認
Collection Viewのクラスを「ButtonBarView」と結びつけ、Moduleは「XLPagerTabStrip」であることの確認
下のコードで色々数字を変えてみましたがうまく行きませんでした。。

何かアドバイス頂けると幸いです。

1したいこと

2実際のもの（NavigationControllerなし）

3実際のもの(NavigationControllerあり)

4 storybord

import UIKit
import XLPagerTabStrip
class QuestionViewController: ButtonBarPagerTabStripViewController {
    

    override func viewDidLoad() {
        
       configureButtonBar()
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        }
       
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //管理されるViewControllerを返す処理
        let firstVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Movie")
        let secondVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Book")
        let thirdVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Music")
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }
    
    func configureButtonBar() {
        // Sets the background colour of the pager strip and the pager strip item
        settings.style.buttonBarBackgroundColor = .white
        settings.style.buttonBarItemBackgroundColor = .white
        
        // Sets the pager strip item font and font color
        settings.style.buttonBarItemFont = UIFont(name: "Helvetica", size: 16.0)!
        settings.style.buttonBarItemTitleColor = .gray
        
        // Sets the pager strip item offsets
        settings.style.buttonBarMinimumLineSpacing = 0
        settings.style.buttonBarItemsShouldFillAvailableWidth = true
        settings.style.buttonBarLeftContentInset = 0
        settings.style.buttonBarRightContentInset = 0
        
        // Sets the height and colour of the slider bar of the selected pager tab
        settings.style.selectedBarHeight = 3.0
        settings.style.selectedBarBackgroundColor = .orange
        
        // Changing item text color on swipe
        changeCurrentIndexProgressive = { [weak self] (oldCell: ButtonBarViewCell?, newCell: ButtonBarViewCell?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animated: Bool) -> Void in
            guard changeCurrentIndex == true else { return }
            oldCell?.label.textColor = .gray
            newCell?.label.textColor = .orange
        }
    }

    

    
    }
    

}