Despite trying various tips from other Stackoverflow queries, the solutions don't seem to apply in this case. This is the desired outcome.
* {
box-sizing: border-box;
}
html {
height:100%;
width:100%;
border: 0px;
margin:0;
padding:0;
}
body {
height: inherit;
width: inherit;
border: 0px;
margin:0;
padding:0;
}
header {
font-size: 30px;
text-align: center;
width: 100%;
font-family: Lato;
}
... (CSS code continued)
<html>
<head>
<title>Notes:</title>
... (HTML code continues)
</html>Issue: #notesSection is not aligned on the same line as the #brainstormSection when both are set to inline-block.
I have attempted to rectify spacing discrepancies, reset all dimensions, and ensure 100% width and height for HTML, body, and main tags. While the problem can be solved with the float property, is it possible to address it solely with display: inline-block?
UPDATE: After resolving the issue with the inline-block effect by removing unnecessary whitespaces created by CSS, I am now facing challenges with borders. Achieving perfectly straight and even borders, as seen in this example, is proving to be difficult.
Adjusting everything to be flawless in terms of width and height, by meticulously subtracting any added or modified pixels caused by borders, padding, and future changes, is quite cumbersome. Is there a better way to avoid this exhaustive adjustment process? Are there alternative CSS toolkit options for creating two-column webpage projects similar to this example?
UPDATE TWO: Making progress, thanks to the invaluable comments from everyone assisting me! However, there appears to be a noticeable gap in the border between #headerBrainstorm and the content of #sectionBrainstorm. The gap, caused by the padding: 20px; declaration within the #notesSection selector, is perplexing considering all dimensions were reset to box-size: border-box;. I'm curious to understand why this discrepancy persists.
Thank you for your assistance.