Until about 2 days ago my bootstrap grid system was spaced properly but after that there is a small space on the right side of the page and also the images for my tribute page and portfolio are not spaced evenly even with the use of the command “col-lg-6” on both of the divs in the column. Is there any way I could get some help getting my spacing back to normal? I’m not quite sure what line of code caused this.
I believe I’ve seen your code before. How do I put this politely - you need to clean up your code.
For example, you start out:
<div class="top-nav">
<ul>
<li><a>References</a></li>
<li><a>About Me</a></li>
<li><a>Experience</a></li>
<li><a>Home</a></li>
<p class="Grant">Grant Venable</p>
</ul>
</div>
<body>
<div class="quote-1">
<div class="col-lg-12"
<hr></hr>
<p class="quote"><strong>"We always hear about the rights of democracy, but the major responsibility of it is participation."</strong><br></br><p2>-Wynton Marsalis</p2>
</p>
</div>
</div>
<!-- code continues -->
OK, that first div needs to be inside the body. I mentioned that before, in another thread.
You have a typo with <div class="col-lg-12" - it lacks a closing bracket.
You have the line: <hr></hr> - the first one is right, the second isn’t.
You need to keep track of what is going on - I count 30 <div> and only 28 </div>. That is a problem.
And the line:
<p class="quote"><strong>"We always hear about the rights of democracy, but the major responsibility of it is participation."</strong><br></br><p2>-Wynton Marsalis</p2>
</p>
You have <br> and </br> - OK, they’re both allowed,but it is odd. And what is the element tag <p2>? Did you mean <h2>?
And you need to work on your indenting. It needs to show the heirarchy. It will also help keep track of what things are. I also like commenting closing element tags if they are far from their open. For example, the first top-nav div might be this:
<div class="top-nav">
<ul>
<li><a>References</a></li>
<li><a>About Me</a></li>
<li><a>Experience</a></li>
<li><a>Home</a></li>
<p class="Grant">Grant Venable</p>
</ul>
</div> <!-- top-nav -->
This kind of thing will save you sooooooooooooo much time in the long run. Learn to organize your code as you go.
You should try putting your code into an HTML linter like this. You can ignore the first three errors because they are a result of it being HTML for codepen (which doesn’t need a <head> section.
Please don’t get frustrated. You’re doing some good stuff. But you need to learn to keep things neat and logical. You can get away with a little sloppiness on the first projects, but as things get bigger the problems this cause will increase exponentially.
Once you get things organized better and easier to read, we can help you better.