НЕ могу разобраться с блоками div
Совсем недавно начал изучать блоки и пока не совсем понимаю. Задача такова: Нужно создать блок, в нем еще 2 блока, и выравнять их так, чтобы они занимали одинаковое место. У меня же получается так, что блоки стоят друг под другом.
В чем заключается ошибка ? 
А вот код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Главная</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Информация</a></li>
<div class="col-md-3 text-end">
<button type="button" class="mt-2 btn-danger">Источник</button>
</div>
</ul>
</header>
<div class="container mt-5">
<div class="row">
<div class="col-5 offset-1">
<h1>Погода в вашем городе</h1>
<form action="">
<label for="city">Город</label>
<input type="text" id="city" class="form-control" name="city" placeholder="Введите город">
<input type="submit" name="send" value="узнать" class="mt-2 btn-danger">
</form>
</div>
</div>
<div class="col-5 offset -1">
<h1>Информация о погоде</h1>
<div class="alert alert-info">
<div class="row">
<div class="col-9">
<b>Город</b>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Ответы (1 шт):
Автор решения: SLideR11
→ Ссылка
Вы колонку .col-5.offset-1 вынесли из строки .row
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Главная</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Информация</a></li>
<div class="col-md-3 text-end">
<button type="button" class="mt-2 btn-danger">Источник</button>
</div>
</ul>
</header>
<div class="container mt-5">
<div class="row">
<div class="col-5 offset-1">
<h1>Погода в вашем городе</h1>
<form action="">
<label for="city">Город</label>
<input type="text" id="city" class="form-control" name="city" placeholder="Введите город">
<input type="submit" name="send" value="узнать" class="mt-2 btn-danger">
</form>
</div>
<div class="col-5 offset-1"> <!-- плюс тут кривость была из-за того, что тут было 'offset -1'-->
<h1>Информация о погоде</h1>
<div class="alert alert-info">
<div class="row">
<div class="col-9">
<b>Город</b>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>