As a C++ programmer diving into the world of HTML5 and Javascript, I find myself struggling with layouts and seeking advice and constructive criticism. One issue that keeps popping up is the appearance of unwanted scroll bars when I add margin or padding to my designs. Here is a layout mockup I am working on for a Javascript application:
In this design, each box utilizes the 'text-line' class to create an area where my controls are placed. I tried adding a margin to give the cost box items some breathing room. However, as soon as I added a 5px margin to text-line, scroll bars appeared in the left/right panels of my geometry box.
Below is the section where I added the margins:
.text-line {
font-size: 1.6em;
box-sizing: border-box;
width: 100%;
margin: 0px; /* no margins */
}
This issue might be a common mistake for beginners like me, but I would appreciate any guidance on what I am doing wrong and how I can rectify it. If there are any other significant layout errors in my design, I would be grateful if you could point them out. Thank you!