Компоновка navPage: CSS проблема с не выровненными столбцами! Как выровнять?

Question

Я очень новичок в использовании R studio и Shiny. По какой-то причине все поля и интервалы в моем приложении отключены, и с правой стороны большой пробел. Например, мои боксы имеют ширину 12, но справа все еще есть большой зазор, и я не могу заставить все выровняться. У меня есть эта предыдущая проблема, когда я пытался использовать блестящую панель инструментов, чтобы я решил переделать приложение, используя navPage, и выравнивание все еще отключено.

Я пытался использовать CSS, чтобы связываться с отступами и полями и т.д. 1016 * но я просто не знаю.

Просто хочу выровнять все поля и графики с небольшими отступами с обеих сторон, как на любом обычном веб-сайте / приложении.

Спасибо, если вы можете помочь!

Код:

library(shinythemes)
library(shiny)
library(plotly)
library(lubridate)
library(shinydashboard)
library(shinyWidgets)
library(DT)
library(shinyjs)
library(sodium)
library(bcrypt)

ui <- navbarPage(title = tags$a(href='https://google.com.com',
                                tags$img(src='rstudio.png', height =50, width = 195)),
                 tags$head(tags$style(HTML('.navbar-nav > li > a, .navbar-brand {
                                 padding-top:0px !imporant;
                                 padding-bottom:25px !important;
                                 height = 100px;}
                                 .navbar{min-heigh:100px !important;}
                                 .nav>li>a {
                                 padding:25px 30px 100px;
                                 font-size:18px;
                                 }
                                 .row{
                                    margin-right:0px !important;
                                    margin-left:0px !important;}'
))),
                 tabPanel("Dashboard", icon = icon("dashboard"),
sidebarLayout(
    fluidRow( column(2,textOutput("Filters"),width = 2),
        column(10, box( width = 10,
        splitLayout(cellWidths = c("25%","20%", "35%", "20%"),
           selectInput("value", "1st Value to Track:" , choices =  c("Units_Ordered", "Buy_Box_Percentage", "Ordered_Product_Sales", "Session_Percentage","aov"), selected = "Ordered_Product_Sales", multiple = FALSE, selectize = TRUE),
           selectInput("value2", "2nd Value to Track:" , choices =  c("Units_Ordered", "Buy_Box_Percentage", "Ordered_Product_Sales", "Session_Percentage","aov"), selected = "Units_Ordered", multiple = FALSE, selectize = TRUE),
           sliderInput("date", "Date Range:", min = as.Date("2019-07-06","%Y-%m-%d"), max = as.Date("2019-10-26","%Y-%m-%d"), value = c(as.Date( "2019-07-06"),as.Date( "2019-10-26")),step = 7, timeFormat = "%Y-%m-%d"),
           selectInput("marketplace", "Select Marketplace", choices = c("UK","DE","FR","IT","ES")))))
    ),

mainPanel(fluidRow( box(width = 4, valueBoxOutput("max")),box(width = 4, valueBoxOutput("min")),box(width =4, valueBoxOutput("mean"))),
         fluidRow( box(title = "All Brands",status =  NULL ,solidHeader = FALSE, width = 12, inline = TRUE, addSpinner(plotlyOutput("testplot", height = "500px"), spin = "folding-cube")),
         box( title = "All Brands Matrix", status = NULL, width = 12, inline = TRUE, addSpinner(plotlyOutput("valuePlot", height = "500px"),spin = "folding-cube")))
))),

navbarMenu("Brand",icon = icon("chart-line"), tabPanel("A"), tabPanel("B"), tabPanel("C"),tabPanel(("D"))),
                 tabPanel("Download", icon = icon("download"))
)

server <- function(input, output) {
    g <- reactive({
        (input$value)
    })
    h <- reactive({
        (input$value2)
    })  
        output$valuePlot <- renderPlotly({
            #if(g() == "Units_Ordered"){  
            metric2_plot <-  metric2 %>%
                filter(Date >= input$date[1] & Date <= input$date[2] & Marketplace == input$marketplace)%>%
                ggplot(aes(x=Date, y = get(g()))) + geom_point(color = rgb(8/255,172/255,231/255,1)) + geom_line(color =rgb(8/255,172/255,231/255,1), size=1) + geom_smooth(method = 'loess',se = TRUE, level = 0.1, color=rgb(0,0,0,1)) + geom_area(fill=rgb(8/255,172/255,231/255,0.4)) + facet_wrap( ~ Brand) + ggtitle(g()) + labs(x = "Months", y = g()) + theme_bw() 
            metric2_plot
        })
        output$testplot <- renderPlotly({
            #if(g() == "Units_Ordered" & h() == "Ordered_Product_Sales" ){
            testmetric <-  metricx2 %>%
                filter(Date >= input$date[1] & Date <= input$date[2]& Marketplace == input$marketplace)%>%
                group_by(Date, Marketplace)%>%
                ggplot(aes(Date)) + geom_line(aes( y = get(h()), col= h()), size = 1.5) + geom_line(aes(y = get(g()), col=g()), size = 1.5) + geom_point(aes( y = get(h()))) + geom_point(aes(y = get(g()))) + geom_smooth(aes(y=get(h()))) + geom_smooth(aes(y= get(g()))) + theme_minimal() + scale_y_continuous(sec.axis = sec_axis(~ . /10, name = "Scale"))
            testmetric
})
# VALUE BOX --------------------------------------------------------------------------------------------------------------------
#Max
output$max <- renderValueBox({
maxmetric <- metricx2 %>%
             filter(Date >= input$date[1] & Date <= input$date[2] & Marketplace == input$marketplace)
             valueBox( round(max(maxmetric[[input$value]]),2),
             paste("Max of", input$value),
             icon = icon("arrow-up")
            )
        })
#Minimum Value Value Box
output$min <- renderValueBox({
minmetric <- metricx2 %>%
             filter(Date >= input$date[1] & Date <= input$date[2] & Marketplace == input$marketplace)
             valueBox(
             value = round(min(minmetric[[input$value]]),2), 
             paste("Minimum of", input$value),
             icon = icon("arrow-down")
            )
        })
output$mean <- renderValueBox({
meanmetric <- metricx2 %>%
              filter(Date >= input$date[1] & Date <= input$date[2] & Marketplace == input$marketplace)
              valueBox(
              value = round(mean(meanmetric[[input$value]]),2),
              paste("Mean of", input$value), icon = icon("angry")
              )
        })
output$Filters <- renderText({
    "Filters"
})
    }
shinyApp(ui = ui, server = server)

Снимок экрана