When creating a website with a forum, I encountered an issue where the page can be scrolled horizontally only on the forum page. I am using minimal CSS and primarily Bootstrap for styling. Upon removing the <div class="container col-md-6" style="margin-top: 1rem" container, the horizontal scrolling disappears. This leads me to believe that the issue is related to this particular element, but I am unsure of the exact cause. Here is the code snippet:
<html lang="nl">
<head>
<title>name</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa4baa6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d18031d031f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<?php
include 'assets/header.php';
require_once('assets/getInfo.php');
?>
<div class="row">
<div class="container col-md-6" style="margin-top: 1rem">
<?php
foreach (getPost()['posts'] as $item) {
echo " <div class='list-group' style='font-family: Quicksand; margin-top: .5rem'>
<a href='#' class='list-group-item list-group-item-action' aria-current='true'>
<div class='d-flex w-100 justify-content-between'>
<h5 class='mb-1'> " . $item['titel'] . " </h5>
<small>" . $item['bericht_create_date'] . "</small>
</div>
<p class='mb-1'>" . $item['bericht'] . "</p>
<small>Posted by " . $item['username'] . "</small>
</a>
</div>";
}
echo "
<div class='container col-md-8 text-center justify-content-center' style='margin-top: .5rem;'>
<a class='btn btn-primary' role='button' href='forum?page=1'><<</a>
<a class='btn btn-primary' role='button' href='" . prevpage() . "'><</a>
<a class='btn btn-primary' role='button' href='" . nextpage() . "'>></a>
<a class='btn btn-primary' role='button' href='" . lastpage() . "'>>></a>
</div>
";
?>
</div>
<?php
if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) {
echo
"<div class='container col-md-3' style='margin-top: 1rem'>
<form method='post' action='assets/postAddHandler'>
<div class='form-group'>
<label for='formGroupExampleInput'>Title</label>
<input type='text' name='titel' class='form-control' id='formGroupExampleInput' placeholder='Example input'>
</div>
<div class='form-group'>
<label for='exampleFormControlTextarea1'>Message</label>
<textarea class='form-control' name='bericht' id='exampleFormControlTextarea1' rows='3'></textarea>
</div>
<div class='form-group'>
<label for='exampleFormControlFile1'>Photo</label>
<input type='file' name='foto' class='form-control-file' id='exampleFormControlFile1'>
</div>
<div class='form-group' style='margin-top: .5rem'>
<button type='submit' name='addPost' class='btn btn-success'>Add post</button>
</div>
</form>
</div>
";
}
?>
</div>
</body>
</html>