0

I'm trying to copy the Harvard about page as an exercise in order to learn css. The problem I've come upon is that I cannot for the life of me center the navbar and the article element I've got on the page.

I've managed to align the article and navbar side by side by putting them both in a div element and specifying the width as 100%, then making the navbar and article elements 50% of the width each.

This is what I got so far: https://i.stack.imgur.com/h1JvL.jpg

Here's my css:

div { 
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap; 
    width: 100%; 
}

nav { 
    width: 50%;
    vertical-align: top; 
    box-sizing: border-box;
}

article { 
    width: 50%; 
    vertical-align: top;
    padding-right: 80px; 
    box-sizing: border-box; 
    float: right;
    margin-top: -250px;
}
JohnDoe95
  • 11
  • 3
  • So what is your question? – Sato Takeru Jan 13 '21 at 12:30
  • So what is the problem? Are you looking for text-align: center? – Combobulated Jan 13 '21 at 12:30
  • How do I center everything so it's in the middle of the page – JohnDoe95 Jan 13 '21 at 12:30
  • text-align: center centers everything on the page, it looks ugly: https://imgur.com/a/CpRJKCG – JohnDoe95 Jan 13 '21 at 12:33
  • I'm trying to make it look like this: https://imgur.com/a/IGRDBTB – JohnDoe95 Jan 13 '21 at 12:34
  • 1
    Does this answer your question? [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) – Habil Jan 13 '21 at 12:34
  • Surely if your element is 100% width then you cannot centre it as it takes the full width? If you are trying to achieve something more like your image, then you need to give your container a max-width and margin auto instead of 100% width - also I wouldn't use a bare div selector like that as it will apply that style to all divs – Pete Jan 13 '21 at 12:42

0 Answers0