Why isn't my radio button list working anymore? (After styling with CSS)

I created a simple postage calculator in Visual Studio with Web Forms (I know, I know, we had to use Web Forms in Class) using C#. I used some Bootstrap while styling , and at some point, my RadioButtonList stopped working. None of the radio buttons can be selected. Not really sure what caused it.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="PostageCalculator._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />

    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 249px;
            height: 250px;


        }

        #boxiediv {
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
 .outer-div
{
     padding: 30px;
     text-align: center;
}
.inner-div
{
     display: inline-block;
     padding: 50px;
}






    </style>
</head>
<body>
    <form id="form1" runat="server" autocomplete="off">
       <div class="page-header"> 
        <div class="container-fluid">



            <div  id="boxiediv" > <img id="boxielogo" alt="Boxie. Easier than it should be." class="auto-style1" src="boxielogo2.png" align="middle"/></div>

             <br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br />

        <div  style="background-color: #4d6684 !important; "  class="jumbotron outer-div" id="jbotron1"  >

        <div id="textboxes" class="row" >

             <div class="col-md-4">

        <asp:TextBox ID="widthTextBox"  value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
                 <em>&nbsp;width</em></div>

              <div class="col-md-4">
        <asp:TextBox ID="heightTextBox"  value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
                  <em>&nbsp; height</em>
                </div> 

              <div class="col-md-4">
        <asp:TextBox ID="lengthTextBox"  value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
                  <em>&nbsp; length (optional)</em></div>
                 <br />

        </div><!--Closing tag for #textboxes-->

            <div id="radiolist" class="inner-div" >

                <asp:RadioButtonList AutoPostBack="true" ID="deliveryRadioList" runat="server" OnSelectedIndexChanged="Calculate"
              RepeatDirection="Horizontal" >

              <asp:ListItem Value="0.15" style="margin-right: 20px">Ground</asp:ListItem> 
            <asp:ListItem Value="0.25" style="margin-right: 20px">Air</asp:ListItem>
              <asp:ListItem Value="0.45" >Next Day</asp:ListItem>

         </asp:RadioButtonList>



                </div><!-- closing tag for #radios-->
        <asp:HiddenField ID="cost" runat="server" Value="0" />
        <asp:Label ID="resultLabel" runat="server"></asp:Label>
        </div>
    </div>
        </div>
    </form>
</body>
</html>

Solution

The div with the ID boxiediv is covering your whole page by the looks of it, which is blocking the rest of your components. I bet your radio button will work if you comment out that div.

I'm not sure how you want it to look, you may need to use a z-index to move it behind or potentially play around with the height.

#boxiediv { z-index: -1 }