My current page looks like this. After adding the row class so that the two elements are next to each other, the bottom navigation bar is pushed down to where I have to scroll.
Here you can see another page without row elements, where the navigation links are perfectly stuck at the bottom of the display (plants and room navigation elements should not be in the reminder tab (image 1), so ignore This element picture 2) The page is scrollable and keeps my navbar in the correct position, but the outline of the element is incorrect. All green box displays should be on top of one another, along with edit and delete buttons. I tried to fix this using the row class used for Figure 1, but this resulted in the issue in Figure 1.
Here you can see what I want to achieve in the Reminders tab
I am wondering what is wrong with my current css code that causes this error when there is a row element in my html.
If you know of a better way to display items next to each other that prevents this behavior, you are also welcome.
.row {
display: flex;
align-items: center;
border-bottom: 1px solid #bdbdbd;
font-family: 'Montserrat', sans-serif;
}
.CheckButton {
margin-left: 30px;
width: 60px;
height: 80px;
}
.ReminderDescription {
flex-grow: 1;
font-weight: bold;
margin-right: 80px;
}
HTML code snippet causing the problem
{% block content %}
{% for reminderInstance in Reminders %}
<div class="row">
<div class="CheckButton">
<form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
<button class="NewButton NewButton1"></button>
</form>
</div>
<div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
</div>
{% endfor %}
{% endblock %}
If the problem lies elsewhere, I'll include the entire html page as well as the navigation css code. Reminder HTML
<!DOCTYPE html>
<html>
<head>
<title> Reminders </title>
<meta name="viewport" content="width=devide-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/nav.css') }}">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/Collection.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="nav">
<a href="{{ url_for('collection') }}" class="nav__link">
<span class="nav__text">Collection</span>
</a>
<a href="{{ url_for('index') }}" class="nav__link">
<span class="nav__text">Home</span>
</a>
<a href="{{ url_for('reminders') }}" class="nav__link nav__link--active">
<span class="nav__text">Reminders</span>
</a>
</nav>
</body>
</html>
{% block content %}
{% for reminderInstance in Reminders %}
<div class="row">
<div class="CheckButton ">
<form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
<button class="NewButton NewButton1"></button>
</form>
</div>
<div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
</div>
{% endfor %}
{% endblock %}
Navigation CSS
body {
margin: 0 0 55px 0;
}
.nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #4ea662;
display: flex;
overflow-x: auto;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 15px;
color: #ffffff;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
padding: 2px 4px;
border: none;
text-align: center;
border-radius:5px;
background-color: #468454;
color: #ffffff;
} 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Putting the entire content inside a div (like below with 90% width) solved the entire problem:
.div-2 { margin: auto; width: 90%; height: 90%; }