How to make two columns?-CodePudding

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

(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;
}

CodePudding user response：

You probably want to use display grid for the columns. But it should work with display flex also.

For the space remove the margin and padding.

Something like this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="content">content</div>
        <div class="content">content</div>
    </div>
    <style>

        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .container{
            height: 100vh;
            background-color: yellow;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .content{
            display: grid;
            place-items: center;
            border: 1px solid blue;
        }
    </style>
</body>
</html>

CodePudding user response：

Here's my solution using flex:

.intro {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  text-align: center;
  background-color: #dfcff6;
}
body{
margin-left: 10%; 
  margin-right: 10%;
  margin-top: 2em;
}

<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="https://fotojoker.pl/blog/wp-content/uploads/autor-300x300.jpg" alt="Another photo because I have not original :)" width="500" height="500">

</div>