Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1307

How to make two columns?

$
0
0

CLICK HERE TO SEE WHAT IT LOOKS LIKE RIGHT NOW!!!

CLICK HERE TO SEE MY GOAL-ish

(had to hide my name and face for privacy names in the picture and censor my name in the html)

1. So basically I was wondering how I could put the text and the image in two separate columns side by side?

2. Also, I don't know how to remove that space between the header and main part. I'm sorry if this seems ridiculous.

HTML (not all of it, just the important part):

<h4>My Portfolio</h4><nav><ul><li><a href="Home.html">Home</a></li><li><a href="Education.html">Education</a></li><li><a href="About Me.html">About Me</a></li><li><a href="Contact.html">Contact</a></li></ul></nav>
<div class="intro"><p><b>Hi!</b><br>    My name is <b>insert my name here</b> and I am a first year <b>computer science</b> student.</p><img src="Me.jpg" alt="A picture of me in front of pink flowers" width="500" height="500"></div>

CSS:

body{margin-left: 10%;     margin-right: 10%;    margin-top: 2em;}header{    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;}h4{    padding: 20px;}.wrapper{    background-color: #a989d6;    display: flex;    align-items: center;    justify-content: space-between;  }nav ul{    list-style-type: none;}nav a{    text-decoration: none;    padding: 20px;}nav li{    display: inline;}.intro{    text-align: center;    align-items: center;}main{    background-color: #dfcff6;}footer{    background-color: #a989d6;    text-align: center;    padding: 20px;    font-style: italic;}

Viewing all articles
Browse latest Browse all 1307

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>