I am encountering challenges with the overall design of my website, particularly with how the main content area and sidebar are positioned. The layout I have in mind is:
https://i.sstatic.net/PYphE.jpg
Below is the code snippet I am using to implement this design (spread across multiple files as it is a Symfony 3.4 project) -
base.twig.html:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html dir="ltr" lang="en-us">
...
index.twig.html:
{# app/Resources/views/Store/index.html.twig #}
...
category_list.twig.html:
{# do something with htmlTree - remember: this DOES NOT contain blocks, or inherit from base.html.twig #}
...
This combination results in the following output:
https://i.sstatic.net/bQMUe.jpg
The main issue I am facing is that the sidebar/category list extends beyond the navigation bar. It appears that the navbar has some horizontal margin/padding applied. My goal is to confine both columns - sidebar and content - within the visible width of the navbar. Essentially, I aim for the navbar to have no white space on its left/right sides.
While I believe I can adjust the columns, margins, and padding to resolve most issues, ensuring consistency along the edges remains a top priority.