I am trying to get the H2 element filled with "Portfolio" centered above the 2 img elements. I am having trouble doing this. Right now, it is stuck on the left side of the 2 .col-md-4 bootstrap columns. Could you point me in the right direction?
Here is the codepen.
Here is the code:
<div class="portf row">
<h2>Portfolio</h2>
<div class="portfolio col-md-4">
<img class="port1 img-responsive" src="https://s8.postimg.org/v4ol85ct1/hangman.jpg">
<p>A game of hangman made with: HTML, CSS, and JavaScript.</p>
</div>
<div class="col-md-4 img-responsive"><img src="https://s8.postimg.org/3kagp7ctx/BFSkinner.jpg" alt="pic 2">
<p>A B.F. Skinner tribute page made with: HTML and CSS.</p>
</div>
</div>
Your display:flex style on the row class is causing this. Adding the following CSS should fix the immediate issue:
.portf {
display: block;
}
You might want to reconsider using display:flex on the row class. Much of your CSS could be simplified by removing it and centering the col-md-8 columns by adding a col-md-offset-2 class to them.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句