tabsetPanel style in Shiny Apps

Question

I'm changing the style of a Shiny app and it is quite tricky change the design. I want to have a main navigation with tabPanel (done) and then two tabsetPanel. In the following image, the result I want to achieve with my changes in the CSS.

tabPanel(
    "Attribute specification",
    tags$main(
        id = "element",
        class = "container",
        
        # Main panel for displaying outputs ----
        mainPanel(
            class = "col-xs-12 col-sm-12 col-md-12 inside-tabs",
            # Output: Tabset w/ plot, summary, and table ----
            tabsetPanel(type = "tabs",
                        tabPanel(
                            "Plot", 
                            plotOutput("distPlot3")
                        ),
                        tabPanel("Summary", verbatimTextOutput("summary")),
                        tabPanel("Table", tableOutput("table"))
            )
        )
    )
)

This is the code I wrote to have the first tabpanel and the following code is the CSS

.inside-tabs {
    margin-left: -32px;
    margin-top: -16px;
}

.inside-tabs > .nav {
    margin-left: -30px;
    margin-right: -30px;
}

.tab-content {
    margin-left: 30px;
    margin-right: 30px;
}

.nav-tabs > li > a {
    border: 1px solid #ddd;
    padding-left: 75px;
    padding-right: 75px;
    background-color: #fcfcfc;
}

.nav-tabs > li.active > a {
    border: 1px solid #ddd;
    padding-left: 75px;
    padding-right: 75px;
    background-color: #ffffff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: none;
    border-top: none;
    box-shadow: none;
    color: #30256c;
    font-weight: 300;
}

.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus:hover {
    border: none;
    color: #ddd;
    color: #30256c;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #30256c;
}

The result is this one

the result HTML code is

  <div class="tab-pane active" data-value="Attribute specification" id="tab-5432-3">
    <main id="element" class="container">
      <div class="col-sm-8 col-xs-12 col-sm-12 col-md-12 inside-tabs">
        <div class="tabbable">
          <ul class="nav nav-tabs" data-tabsetid="5738">
            <li class="active">
              <a href="#tab-5738-1" data-toggle="tab" data-value="Plot" aria-expanded="true">Plot</a>
            </li>
            <li>
              <a href="#tab-5738-2" data-toggle="tab" data-value="Summary" aria-expanded="true">Summary</a>
            </li>
            <li>
              <a href="#tab-5738-3" data-toggle="tab" data-value="Table" aria-expanded="true">Table</a>
            </li>
          </ul>
          <div class="tab-content" data-tabsetid="5738">
            <div class="tab-pane active" data-value="Plot" id="tab-5738-1">
              <div id="distPlot3" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 400px"></div>
            </div>
            <div class="tab-pane" data-value="Summary" id="tab-5738-2">
              <pre id="summary" class="shiny-text-output noplaceholder shiny-bound-output"></pre>
            </div>
            <div class="tab-pane" data-value="Table" id="tab-5738-3">
              <div id="table" class="shiny-html-output shiny-bound-output"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

I can't align the tabs in the center because the style is on the ul tag. If I inspect with the developer tool, I can see there is a "border" that I can't get rid of it.

Any idea? Also, how can I implement the second tabPanel where you can select the country?