Can anyone help me with my product page. I want to align my images all together like shopping page. Tried literaly everything. Cannot use div tags because my page is meant to be semantic for my assignment.
This image is my css for navigation only
Second image is the main content which am struggling on
my page currently
If this is for an assignment you should really do your own research. I also do not see any CSS that looks like an attempt to make a grid for the products. What have you tried?
Anyway, you should give the products a container. I wouldn’t suggest using main as the product grid container. The section element is a semantic element. However, for general grids, there is really nothing wrong with using divs. Often you will use the semantic element as the main container and then have the grid inside it using a div.
<section class="products">
<div class="products-grid">
...
</div>
</section>
You can make the grid in a lot of ways, like using Flexbox or CSS Grid. Search for it, there are plenty of tutorials and guides on this. I would also suggest using MDN for documentation (e.g. the CSS layout section).
okay thank you for your help