Shiny: How to make the title of navbarPage() fill the window?

I want to make the Area 1 fill the window, and the Area 2 has a fixed width. enter image description here

The final results should be like: enter image description here

My code is shown as following:

library(shiny)
library(shinythemes)
ui <- fixedPage(
  tags$style(HTML("
          .navbar .navbar-header {float: left; }
          .navbar .navbar-nav {float: right;}
          .container {min-width: 1250px}
        ")
  ),
  navbarPage(
    windowTitle = "GMAP",
    fluid = TRUE,
    title = "Title",
    selected = "Density",
    tabPanel(
      "Introduction",
    ),
    tabPanel(
      "Combination"
    ),
    tabPanel(
      "Density",
      tabsetPanel(
        selected = "Cluster analysis",
        tabPanel(
          "AAAAAAAAA"
        ),
        tabPanel(
          "BBBBBBBB",
          
        ),
      )
    ),
    tabPanel(
      "Effective score",
    ),
    tabPanel(
      "Effective percent"
    ),
    tabPanel(
      "Help"
    ),      
    tabPanel(
      "About"
    )
  )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

I tried to put a navbarPage() into a fixedPage(), but it can not work correctly. Could you tell me how to achieve my goal?

edit version 2: Thanks for your answer! I want to make one of the tabpanel() left and make others right, like below: enter image description here

I tried to set padding by the code:

.nav-tabs>li:nth-child(1) {margin-right: 305px; }

However, all first tabpanel will be changed if I do this, like below: enter image description here

I think this problem can be solved by set a unique id for the tabpanel I want to make it left align, but I can not achieve the goal by add id = "density_ui_definition". I know it is correct in div(id = "XXX"), but tabpanel(id = "XXX") does not work. I have make the releated chagnes in your code

library(shiny)
library(shinythemes)
ui <-   div(
  tags$style(HTML("
        @media (min-width: 768px) {
            body > div .container-fluid {
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            body > div > .container-fluid {
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            body > div .container-fluid {
                width: 1170px;
            }
        }
        body > div > .container-fluid:nth-of-type(1) {
            margin: 0 auto;
            padding-top: 55px;
        }
        body > div > nav .nav.navbar-nav {
            float: right;
        }
        
        .nav-tabs>li { float: left; margin-bottom: -1px; padding-right: 200px}
        
        ")),
  navbarPage(
    position = "fixed-top",
    windowTitle = "GMAP",
    fluid = TRUE,
    title = div(id = "img-main",
                img(src="logo.png", height = '32px', width = '133px'),
                style = ""),
    selected = "Density",
    tabPanel(
      "Introduction",
    ),
    tabPanel(
      "Combination"
    ),
    tabPanel(
      "Density",
      tabsetPanel(
        selected = "BBBBBBBB",
        tabPanel(
          "AAAAAAAAA",
          tags$img(src = "https://i.stack.imgur.com/EtaJC.png", style = "width: 100%")
        ),
        tabPanel(
          "BBBBBBBB",
          tabsetPanel(
            selected = "CCC",
            tabPanel(
              "CCC"
            ),
            tabPanel(
              "DDD"
            ),
          )
        )
      )
    ),
    tabPanel(
      "Effective score",
    ),
    tabPanel(
      "Effective percent"
    ),
    tabPanel(
      "Help"
    ),      
    tabPanel(
      "About"
    ),
    hr(),
    tags$footer(
      HTML("<p>Copyright © 2022 All Rights Reserved.</p>"), 
      align = "right"
    )
  )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

Can you help me modify it agin? Thank you!

library(shiny)
library(shinythemes)
ui <- div(
    tags$style(HTML("
        @media (min-width: 1200px) {
            body > div > .container-fluid {
                width: 1170px;
            }
        }
        @media (min-width: 992px) {
            body > div > .container-fluid {
                width: 970px;
            }
        }
        @media (min-width: 768px) {
            body > div > .container-fluid {
                width: 750px;
            }
        }
        ")),
    navbarPage(
        windowTitle = "GMAP",
        fluid = TRUE,
        title = "Title",
        selected = "Density",
        tabPanel(
            "Introduction"
        ),
        tabPanel(
            "Combination"
        ),
        tabPanel(
            "Density",
            tabsetPanel(
                selected = "Cluster analysis",
                tabPanel(
                    "AAAAAAAAA"
                ),
                tabPanel(
                    "BBBBBBBB"
                )
            )
        ),
        tabPanel(
            "Effective score"
        ),
        tabPanel(
            "Effective percent"
        ),
        tabPanel(
            "Help"
        ),      
        tabPanel(
            "About"
        )
    )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

Change width inside media to numbers you want.

enter image description here

Edits:

library(shiny)
library(shinythemes)
ui <- div(
  tags$style(HTML("
        @media (min-width: 768px) {
            body > div .container-fluid {
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            body > div > .container-fluid {
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            body > div .container-fluid {
                width: 1170px;
            }
        }
        body > div > .container-fluid:nth-of-type(1) {
            margin: 0 auto;
            padding-top: 55px;
        }
        body > div > nav .nav.navbar-nav {
            float: right;
        }
        ")),
  navbarPage(
    position = "fixed-top",
    windowTitle = "GMAP",
    fluid = TRUE,
    title = "Title",
    selected = "Density",
    tabPanel(
      "Introduction"
    ),
    tabPanel(
      "Combination"
    ),
    tabPanel(
      "Density",
      tabsetPanel(
        selected = "AAAAAAAAA",
        tabPanel(
          "AAAAAAAAA",
          tags$img(src = "https://i.stack.imgur.com/EtaJC.png", style = "width: 100%")
        ),
        tabPanel(
          "BBBBBBBB"
        )
      )
    ),
    tabPanel(
      "Effective score"
    ),
    tabPanel(
      "Effective percent"
    ),
    tabPanel(
      "Help"
    ),      
    tabPanel(
      "About"
    )
  )
)



server <- function(input, output, session) {}

# Run the application
shinyApp(ui = ui, server = server)

enter image description here