estoy practicando html y css. Estoy intentando hacer una página web con un poco más de detalles y un diseño más limpio así que quise implementar Bootstrap 5, ya tenía mucho de mi código y se veía acomodado, para incorporarlo a mi código lo pongo de esta manera:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
Pero al momento de ponerlo y revisar como se ve pasa de esto:
Al igual que con responsividad se mueve todo Antes
Después Como se ve en la foto se desacomoda mi navbar e incluso donde está el texto y la imagen se alejan de los bordes de la página. Ya estuve checando mi código, he quitado elemento por elemento para ver que es lo que pudiera intervenir con bootstrap, pero nada funciona para regresar el formato acomodado que tenía. Aquí está mi código de html:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="inicio.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="navigation">
<div class="container">
<div class="navbar">
<div class="logo-toggle-container">
<a href="#">
<img src="fotos_inicio/Paquetería (2).png" alt="" />
</a>
<span class="toggle-box">
<span></span>
<span></span>
<span></span>
</span>
</div>
<ul class="menu">
<li><a href="#">Sucursales</a></li>
<li><a href="#">Destinos y horarios</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Crear cuenta</a></li>
<button type="button" class="btn btn-outline-primary">Inicia sesión</button>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="container2">
<h1 class="main-text">Paquetería Tamazula</h1>
<hr width="50" size="5" color="#3b7cff">
<br>
<p class=""> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam vero quia perspiciatis? Necessitatibus cum expedita quisquam itaque minima ea incidunt ratione, perferendis similique quam! Quaerat facere cum est commodi provident.</p>
</div>
<div>
 
</div>
<img src="fotos_inicio/p1.jpeg" alt="">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="inicio.js"></script>
<b4-></b4->
</body>
</html>
Pensé que podría ser por el css, pero de todas formas no me funciona (código css):
*
{
margin:0;
padding:0;
}
body
{
width: 100%;
height: 100vh;
font-family: 'helvetica';
font-weight: 200;
}
.navigation
{
background-color:#fff;
}
/*AQUI*/
.navigation > .container
{
max-width: 90%;
margin: auto;
}
.navigation .navbar
{
position:relative;
}
.navigation .navbar .logo-toggle-container
{
position: absolute;
left: 50%;
top: 5px;
transform: translateX(-50%);
}
.navigation .navbar .logo-toggle-container a
{
display: block;
}
.navigation .navbar .logo-toggle-container a img
{
width: 120px;
}
.navigation .menu
{
text-align: right;
}
@media screen and (min-width:1024px)
{
.navigation .menu
{
display: block !important;
height: auto !important;
}
}
.navigation .menu li
{
display: inline-block;
padding: 43px 1px;
}
.navigation .menu li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 600;
letter-spacing: 1px;
color: #163470;
font-size: 16px;
}
.navigation .menu li:nth-child(1),
.navigation .menu li:nth-child(2),
.navigation .menu li:nth-child(3)
{
float: left;
}
.navigation .menu li:hover a
{
color: #BF192A;
}
@media screen and (max-width:983px)
{
.navigation .navbar .logo-toggle-container
{
position: static;
transform: translateX(0%);
}
.navigation .navbar .logo-toggle-container a
{
width: 80%;
}
.navigation .navbar .logo-toggle-container .toggle-box
{
position: absolute;
right: 10px;
top: 30px;
display: block;
width: 30px;
background: #3b7cff;
padding: 15px;
cursor: pointer;
border-radius: 5px;
}
.navigation .navbar .logo-toggle-container .toggle-box span
{
display: block;
max-width: 90%;
margin: auto;
height: 2px;
background-color: #fff;
margin-bottom: 4px;
}
.navigation .navbar .logo-toggle-container .toggle-box span:last-child
{
margin-bottom: 0;
}
.navigation .menu
{
text-align: center;
display: none;
}
.navigation .menu li
{
display: block;
float: none !important;
padding: 0 10px;
border-bottom: 0.5px solid #ccc;
}
.main-text
{
width: 100%;
}
}
.section
{
margin: auto;
display:flex;
justify-content: space-between;
padding: 40px;
width: 90%;
line-height: 2;
background-color:rgb(242, 241, 239);
}
.section img
{
height: 300px;
border-radius: 8px;
}
.section h1
{
margin: 0;
color:dimgrey;
font-weight: 300;
}
.section p
{
color: #163470;
}
.btn-primary:hover
{
background-color: #BF192A;
}
.btn-primary:hover
{
color: #BF192A;
}
¿Alguien sabe por qué pasa esto y como lo puedo solucionar, si hay algo en el código que interfiera con bootstrap?