After encountering several issues on my website, I attempted to resolve them. While some problems were successfully solved, others remained unsolved. Frustrated by multiple failures, I decided to seek help by posting this question.
Problem 1: A blank space appears on the right side of the Bootstrap 4 navbar. Here's a screenshot for reference: navbar. Additionally, the navbar collapse icon is not displaying properly; instead, a blank button is visible.
Problem 2: On an iPad screen, there are blank spaces appearing on both the left and right sides despite CSS media queries being used. See the screenshot here: screenshot.
Problem 3: The navbar fails to occupy the entire width of a smartphone screen. Reference screenshot: screenshot.
Problem 4: Within the 'mainstyle.css' file located in the same directory, adding tags like 'padding-0' or 'padding-1' disrupts the functionality of the code inside it. Any additional tag inclusion also results in malfunction.
Code snippet - [index.php]
<?
?>
<html>
<head><title></title>
... (omitted for brevity)
'mainstyle.css' content:
@font-face {
font-family: "hana";
src: url("fonts/hana.ttf");
}
... (CSS styles omitted for brevity)
View the working demo here: https://jsfiddle.net/7sm6wuz3/1/