Necesito ayuda para alinear estos tres Divs Horizontalmente, intente recudir el tamaño de uno por si era porque no entraba pero fue en vano. Pienso que el container es pequeño, intente agrandarlo en el Style.css pero no funciono tampoco.
Este es mi index.html me faltaria agregar un header pero quiero solucionar este problema de estos divs
.container {
overflow: hidden;
height: 100%;
}
.container .item {
float: left;
}
.container .col-md-6 {
float: left;
}
.container .col-md-3 {
float: left;
}
<head>
<meta charset="utf-8">
<title>ChepesDeliveryManagerWeb</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="col-md-6">
<form id="task-form">
<div class="form-group">
<input type="text" id="task-title" class="form-control" class="Task Title" placeholder="Task Title" autofocus>
</div>
<div class="form-group">
<textarea id="task-description" rows="3" class="form-control" placeholder="Task Description"></textarea>
</div>
<button class="btn btn-primary" id="btn-task-form">
Save
</button>
</form>
</div>
<div class="col-md-6">
<form id="task-frm">
<div class="form-group">
<input type="text" id="ta-title" class="form-control" class="Task Title" placeholder="Task Title" autofocus>
</div>
<div class="form-group">
<textarea id="tas-description" rows="3" class="form-control" placeholder="Task Description"></textarea>
</div>
<button class="btn btn-primary" id="btn-tak-form">
Sav
</button>
</form>
</div>
<div class="col-md-3">
<form id="taskrm">
<div class="form-group">
<input type="text" id="ta-tle" class="form-control" class="Task Title" placeholder="Task Title" autofocus>
</div>
<div class="form-group">
<textarea id="tas-dription" rows="3" class="form-control" placeholder="Task Description"></textarea>
</div>
<button class="btn btn-primary" id="btn-form">
Sav
</button>
</form>
</div>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyC9t7JmEgqONRgJ7KoZGzcb708C_rxlnqs",
authDomain: "chepesdelivery.firebaseapp.com",
databaseURL: "https://chepesdelivery-default-rtdb.firebaseio.com",
projectId: "chepesdelivery",
storageBucket: "chepesdelivery.appspot.com",
messagingSenderId: "541281515111",
appId: "1:541281515111:web:1c8201aee43b70297d06c2",
measurementId: "G-CZ5GLT4JQQ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="index.js"></script>
</body>
En mi index.js no tengo nada aun
Bueno este es todo mi codigo. Tengo pensado integrar esta pagina con mi base de datos de Firebase y primero estoy desarrollando la interfaz, y me surgio este problema.